
Show HN: I built an online image editor using WebGL and CSS transforms - rikschennink
https://pqina.nl/doka/image-editor/
======
tobiaswk
Cool!

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

~~~
nickjj
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.

~~~
IvanK_net
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!

~~~
nickjj
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.

~~~
IvanK_net
I usually check the accessibility at
[https://www.uptrends.com/tools/uptime](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.

~~~
nickjj
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.

------
tomashubelbauer
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.

~~~
rikschennink
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).

------
daliusd
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](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 :)

~~~
eternalny1
> 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.

~~~
daliusd
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 :)

------
bitL
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!

~~~
zawerf
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/building-a-professional-design-tool-on-the-
web/)

[https://www.figma.com/blog/webassembly-cut-figmas-load-
time-...](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)

------
lucasverra
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](https://whimsical.com/a) => not quick and dirty
enought \- [https://screenzy.io/](https://screenzy.io/) => do not manage 2
images

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

~~~
lucasverra
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/](https://screenzy.io/) than
draw.io.

------
MarcScott
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.

~~~
citilife
I mean, I use gimp...

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

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

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

------
mk89
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...

~~~
djsumdog
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.

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

------
sokoloff
Very nice.

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

~~~
mgoetzke
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

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

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

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

------
BilalBudhani
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!

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

------
deft
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.

------
pgt
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.

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

~~~
rikschennink
Thanks :)

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

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

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

~~~
w56rjrtyu6ru
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.

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

~~~
aloer
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?

~~~
rikschennink
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.

------
fareesh
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

~~~
rikschennink
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.

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

------
ybahubali2018
Looks great. Excellent work.

~~~
rikschennink
Thank you :-)

------
danvesma
This is lush – great work

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

~~~
rikschennink
Thanks!

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

------
HyperTalk2
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](https://pqina.nl/doka/#pricing)

~~~
ceejayoz
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.

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

------
zerm778
wow so creative

