I'm a graphic designer who would like to create an app that takes graphic assets and creates graphics combined with the assets.
Example: I've got 3 heads, 3 bodies, and 3 weapons of a monster and I'd like to create all possible combinations, multiply by color schemes, and export to PNG or GIF files.
I've been learning JS for some time now and I wanted to create this kind of app in Electron, but I have a hard time finding the learning resources about image processing in JS. I looked here on the stack, but a lot of similar questions are from ~2009 and they reference non-existing MDN docs.
Could you please suggest me a direction? I've found some tutorials on HTML canvas processing, but they mostly applied filters on JPGs.
check this library out : html2canvas
just select the container of your combination and it will do the job.
html2canvas(document.body).then(function(canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
});