How can I insert an image into an image, but keep the background transparent?

[konnorov]

plz help(((

[iandoesallthethings]

I'm having the same problem. Image.insert() doesn't respect alpha values. Is there anything to be done about that?

[incanus]

One method is to iterate pixels with getPixelXY() for both source and destination images and apply the Porter-Duff algorithm as described here under The mathematics of alpha compositing:

https://apoorvaj.io/alpha-compositing-opengl-blending-and-premultiplied-alpha/

It's quite easy to do and has worked well in a project of mine.

Though this project could benefit from a composite() operation, or else improvements to insert().

[targos]

I'm sorry if we are not very responsive on this issue tracker, but we are currently working hard on a TypeScript rewrite of the library in https://github.com/image-js/image-js-typescript
It contains a new copyTo method which I think does what this ticket is asking for.

[moruzerinho6]

Any timeline for the rewrite? Having the same problem and as OP