Save multiple with all css applied elements from self DOM to jpg/png file

Question

I developed a project on Laravel and Vue Js. In a part of this site, I have made an App in Vue whom allow the user to drags a <img> tag on another <img> tag, both contained in a DIV. There are many (and the most unsupported) CSS applied to both images, as filters, 3dtransforation, mask, background-source...It works smooth on both Chrome and Firefox. What I have to do now, is to save in jpg/png the "result" of all the trasformations applied to those two images, or to say it better, the html of the div container have to be converted in a image file and saved on server/rendered on the page after a click. I didn't realise this will have been the hardest part.. Whatever I tried until now didn't worked. I tried using

1. Domtoimage -> The problem that I have with this javascript library is that I'm loading 1 image from the server (local currently) and 1 image from an S3disk on the AWS, and there are cross-browser compatibility problems.
2. Browsershot -> The issue experienced for me here is again about having the files on different storages, but here the problem is on the localhost. Hww, doing a try with both image on S3, some of the CSS properties are not rendered (mask, opacity, transform)
3. HTML2CANVAS -> Again both issues: cross origin, and not rendering most of the required CSSs.

At this point I really not longer know where to look out for a solution. It seems that for as easy is to set the css for two elements that works, it's impossible to ask java or the server to just "print out" what you see, exactly as you are seeing it. About "printing": I noticed (trying to find a workaround) that even if by pressing print page, on the preview, some CSS are missing, while they are clearly visible in the page.

I'll be definitively grateful if somebody have any suggestion

Answer 1

As I said in comments, here are some solutions. About the solution that involves wkhtmltoimage in server side, is as follow:

wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine

• Download and install wkhtmltopdf wich includes wkhtmltoimage
• Send from client all what you need (more detail below)
• In backend create a html file with all what you need, you could include css and javascript
• run wkhtmltoimage http://yourHtml.html yourdesiredImage.jpg
• You have your page with all rendered like a browser in yourdesiredImage.jpg

---

As you have to send to backend some behaviors that users perform with css, you could use window.getComputedStyle(element) to store all properties applied to an element into an object.

You have to send the object created by window.getComputedStyle(element) to the backend with ajax and reapply the rules.

To reapply those styles you could use something like:

var stylesComputed = {}//My object from frontend 

var source = document.getElementById("source");
var target = document.getElementById("target");


var copy = document.getElementById("copy");

copy.addEventListener("click", function(){
      var styles = "";
      for(let i = 0; i<stylesComputed.length-1; i++){
      styles += stylesComputed[i]+":"+stylesComputed[stylesComputed[i]]+"; ";
      }
      target.setAttribute("style", styles);

      document.getElementById("t2").innerHTML = "Target (copied)";
});

full example here: https://jsfiddle.net/5c9rhxbn/