Show HN: I built an online image editor using WebGL and CSS transforms | Hacker News Reader

Show HN: I built an online image editor using WebGL and CSS transforms

pqina.nl

425 pointsrikschennink72 comments

Cool!

Can't help but to mention photopea; https://www.photopea.com/ Pretty impressive stuff made by one guy (it was initially). Basically a viable alternative to photoshop in a browser.

And Picozu - https://www.picozu.com

I started to use Photopea for making thumbnails for my videos and blog posts a few months ago but I wish it were more stable.

Sometimes it has network connectivity issues that prevents the app from working -- even if you download the "offline" app.

Like 2 days ago I couldn't add text to an image because the font list couldn't be loaded over the network due to the site having connectivity issues (and it doesn't work when offline). I had to resort to using gimp otherwise it would have delayed a video from being published.

Of all of the online or offline non-Flash image editors that try to replace Photoshop this one is my favorite. I hope it continues to get more developed. It lacks a lot of things but it's good enough for whipping together basic multi-layer layouts. Little things like being able to auto-center things vertically and horizontally by just dragging things around saves so much time. Also supporting Photoshop style layers for doing outlines and shadows speed things up.

Hi, I am the author of Photopea :)

Photopea is used by 120,000 people every. We rarely get reports about the site not loading correctly. We received one in June from a user from Malaysia. After some communication, we noticed that it worked well when he used his mobile data, and did not work only on WiFi, so probably the problem was with ISP.

If it happens again, just let us know!

Hi! Would it be possible to add something like GIMP's "Color to Alpha" filter to Photopea?

https://photo.stackexchange.com/questions/2834/does-photosho...

Same process works for Photopea.

This was on a wired connection in the US (75mb down / 25mb up). I'm not sure what was up but every other site worked and I had no packet loss anywhere else. I had a 7ms ping time to my gateway and <= 20ms to a bunch of sites I tested.

It's just photopea.com is down for me completely and that prevents the app from allowing you to use text since that depends on network loaded fonts.

It's actually still happening now every once in a while over 24 hours later. Like right now it took 2 minutes to access the program but it eventually loaded (this was due to the site having 100% packet loss at the time).

A few "is it down for me?" sites are reporting it down as well but it seems to be pretty spotty (sometimes they report up, sometimes down). I'm from the east US if it helps.

Is there any way you can have the program use local fonts when no network is detected? With the current behavior when there's no network you click the text tool and then it sits forever while the font selection window fails to load.

I usually check the accessibility at https://www.uptrends.com/tools/uptime. Now, it says that "it works everywhere" (e.g. it was loaded in 0.7 seconds in NY). 18 people are using Photopea in NY as I type this message.

Could you write me an email to support@photopea.com, and help me investigate it?

Sadly, if websites knew about specific fonts in your computer, it would be considered "fingerprinting" :( so browsers do not let us access fonts.

I'm getting 100% packet loss as soon as the connection reaches masterinter.net when I do a traceoute. Uptrends is also showing 5-10s load times for that domain.

I sent you an email with the trace results.

I used that site for the IRS e-pay yesterday!

Photopea is AWESOME!!!

Well done, the app is really smooth even on mobile and I can definitely see it being used for the most common types of image processing. I like the premise of using WebGL and CSS filters. Are you going to open source it? I'd love to see how you implemented that.

Edit: Never mind, I just realized this showcases Doka, a commercial component for image processing on the client so that you don't need to do the image processing in the server. Neat product as well.

Thanks! And indeed, it's a full feature instance of Doka, I figured it might be useful for some people to do quick image editing and offering it for free feels good.

It isn't open source, I do use income from Doka to finance my other open source products (like FilePond).

As I'm doing something very similar (but different) for my new product so I definitely checked it out.

What I like:

* Image orientation (from EXIF) support

* I like how intuitive it is

* I will absolutely use some minor ideas in my product that I have not considered using.

What I dislike:

* I have uploaded 10000 x 6672 image (this one https://unsplash.com/photos/2S4FDh3AtGw) and I see that you scale it down. My experience shows that both Firefox and Chrome handles such large image without problems.

* Delay between action and reaction is too high for my taste. It feels unnecessary sluggish. UPDATE: tested with Chromium and it feels response. Only Firefox is sluggish.

* Flip does not center around zoom

Anyway, awesome work as I know some pain points you might have experienced :)

Hi, Thanks for feedback!

In my experience loading huge images like those and animating them is way too slow so the preview is limited to 1500x1500 pixels (I'm testing on a MacBook from 2014). I have some ideas to work around that. With the recent switch from CSS transforms to WebGL (for the image preview) I've added some additional options.

Good luck with your project!

I don't work with webgl much but I remember there being a max texture size of around 2048 or 4096 on many devices. Wouldn't you end up needing to tile the texture and stuff?

There is a limit on canvas size in most browsers, unfortunately it's rather low on iOS, more than 12 megapixels (4000x3000) will result in empty canvas elements.

Indeed progressively loading high res textures or tiling is a solution to this.

> UPDATE: tested with Chromium and it feels response. Only Firefox is sluggish.

If you're feeling up to it you might want to file an issue with Mozilla on this.

I usually do when I am sure that it is not me who did something wrong. The last time I did naive JSON.parse(JSON.stringify(x)) and Chromium was way faster than Firefox if there are a lot of data in x. I don't feel that this is Firefox bug even if it is slower. In this situation I don't know what might be causing slower behavior on Firefox so I don't feel like a could write good bug report :)

Cool! Congrats! Welcome to the club! ;-)

BTW, does anyone know if there is a transpiler I could use to write an image processing/geometry algorithm/animation algorithm once and then target whatever output language/platform combo is desired? I really dislike JavaScript, I am way more productive in e.g. C++, but I need to rewrite my algorithms from C++ into Java/Swift/JavaScript/Python/CUDA/Kotlin, depending on a platform I address, and frankly I am getting tired of that. I just want to have a vanilla algorithmic code that is pretty transferable across platforms (desktop/web/iOS/Android) automatically transpiled to another language as I need (with platform-specific stuff done in a custom fashion of course); I don't care about performance optimizations for that (no time for that per platform anyway). WebAssembly is supposed to help but it's still not there yet.

Thanks for any advice!

Figma is pretty successful and is written in C++ compiled to webassembly:

https://www.figma.com/blog/building-a-professional-design-to...

https://www.figma.com/blog/webassembly-cut-figmas-load-time-...

Have a look at Haxe. It transpiles to C++, Java, Javascript and Python.

https://haxe.org

i've been looking for an online web tool that allows me to :

- paste image 1 from clipboard on canvas

- paste image 2 from clipboard on canvas

- play with canvas overall size to adjust surface of ima1+ima2

- anotate (text, arrow, square)

- maybe some template background colors

- copy entire canvas to clipboard or download png

today i've came back to native powerpoint on my machine with a template that i have to clean on startup (no blank template possible :()

Can you help ?

- https://whimsical.com/a => not quick and dirty enought - https://screenzy.io/ => do not manage 2 images

Sounds more like diagramming functionality, have you tried draw.io or alike?

i have indeed, but i thing you've hit it in the middle (of the problem). My need is much more like https://screenzy.io/ than draw.io.

Yep, looking for the same thing. This is so close that I feel adding image splicing capabilities wouldn't be too hard. Powerpoint is ok but too bulky and hard to get the dimensions you want.

This is perfect, thank you.

I need to crop and annotate images all the time for work. I used to use Skitch when I had a Mac, but since moving over to Linux there seems to be a complete lack of simple tools to do basic editing and markup.

I mean, I use gimp...

I think his point is slightly different. GIMP is neither basic, nor obvious for simple editing.

Nice, and cool name too (I suspect you mean doka = Donkere Kamer = Dark Room?)

Yes, it's the perfect fit, I have someone else to thank for that as I'm horrible at naming things.

It doesn't work in Firefox 69.0 :/ Am I the only one? I select one of the images provided in the webpage and it gets stuck on "Loading image...". Sigh...

Hey, thanks for reporting, that's very odd, if you're familiar with web development can you check if your browser is throwing any errors?

It sat there maybe 2-3 seconds, but then loaded fine for me.

Gets stuck for me too on 68.0.2 (64-bit/Linux). Works in Chrome. Looking at the console I get:

<SetDimensions>: Failed to create WebGL context: WebGL creation failed: * Refused to create native OpenGL context because of blacklist entry: FEATURE_FAILURE_GLXTEST_FAILED * Exhausted GL driver options.

This is my work laptop so I never bothered to setup Mesa/GL correctly .. probably the issue. The app should still do a check and report that WebGL isn't enable to the user.

Thanks, I'll look into this. If I understand correctly you do get the "WebGL isn't enabled" message?

Very nice.

Suggestion: in the aspect ratio constraint picker, change “free” to “unconstrained”, “variable”, or “fully variable” to avoid the confusion with “no charge”.

Thanks! And excellent idea, added to the todo list.

and free is not actually free. i had a very wide image which i chose 16:9 for then back to free and I could not actually move the box back to the original content

I think you had to zoom out the image (scale down with scroll wheel or multi-touch), maybe this needs to be more clear.

You forgot to add that it works well on a phone! Amazing work.

I specifically build it to work well across multiple different contexts :)

This looks great. I'm working on a small experimental project which will allow multiple users to collaborate on an image. I will fiddle around with Doka to see how this can fit in with our use case. Great work!

Awesome, let me know if you have any questions, just use that chat widget thingy on the product page.

Really nice and simple, loads quickly unlike competitors and seems more useful for making memes / simple image changes. Please add splicing images together, and freeform drawing.

This is cool. Please consider adding a way to increase the size of the artboard and compose images on it. Put differently, let me "uncrop" the image or add margins.

Multiple times this week I had to pad height or width to a trimmed image to look good on apps like Instagram, or Tinder, or a Facebook cover page.

I've really enjoyed watching Rik build this library. Congrats, Rik!

Thanks :)

Cool tool. Also I like the animations, improves the experience a lot!

Would be cool to make as a PWA so I could use it offline

Nice ;) How come you use WebGL rather than e.g. SVG?

Correct me if I'm wrong, but I think WebGL is the most performant graphics pipeline available in browsers today.

I'm hooked on SVG's promise of semantic graphics, but every time I tried building something with SVG in a browser the performance just wasn't there, especially on low-end devices.

You're absolutely right, you either go for CSS 3D Transforms, or WebGL, WebGL being faster still.

What’s your take on 2d canvas? I always see these 2d Toole using webgl and wonder how big of a difference it is.

Filters of course work best in webgl. But the rest?

Also, do you use offscreencanvas in chrome?

Every operation is just way faster in WebGL.

I currently use WebGL for display preview and 2D canvas for generating the actual image.

I suspect you'll run into performance issues if you plan to animate the image in a 2D canvas context (like I do when rotating / flipping / etc.)

I've been planning to use offscreencanvas but haven't gotten around to it yet.

Performance.

Initially I rendered the image preview with CSS 3D transforms, while super fast on Safari, it turned out this wasn't as performant on Chrome when viewing on a retina display (weird right?). So I switched to WebGL, which sits closer (closest?) to the hardware and therefor yields better results. It's now super fast, it can animate filter transitions at 60FPS.

SVGs currently don't support hardware acceleration, so that's why I went with CSS transforms for other parts of the UI. The only things rendered with SVG at the moment are the markup, the UI icons, and the rotation control.

Looks good. I clicked crop, dragged the handles, then clicked resize, but it zoomed in and the image went underneath the menu.

Browser: Brave on Ubuntu

It'll show the actual output size of the image, I'm not a 100% happy with this yet. The fact that you report it here (as a bug) is a good indicator that it needs to be changed.

Absolutely wonderful UI design. Though I'm not sure if there's any contrast controls etc...

Looks great. Excellent work.

Thank you :-)

This is lush – great work

Great work. Checked out your other products, they are cool as well.

Thanks!

NIce job. Tested with Chrome. Excellent performance. Great work.

You're trying to charge people money for this? $1999 per year for unrestricted access? You can't be serious?

https://pqina.nl/doka/#pricing

Nope, not for the online image editor, you can edit as many images as you like.

That charge is for cases where a company with at least 25 developers wants to include this as a component in their own apps.

It's a pretty normal and reasonable charge for that kind of scenario, in which the company licensing it would likely be charging/earning vastly more than this from their clients or end-users.

There's a charge if you want to use the image editor in your own app. You're buying a library, and if your organization has more than 20 developers working on implementing it $2k is peanuts.

Honestly, if you have a single developer working on an implementation, $2000 isn't that much, so $109 is practically a steal!

wow so creative

Reply on news.ycombinator.com