lundi 2 juillet 2018

Export DIV.innerHtml dynamically updated by vue.js, keeping the css transform prop to -webkit

I have a Vue.js App that allows the user to make some changes to the images displayed and then save it as a jpg. Transformation to image are applied by vue.js methods that defines the style of the image:
<img :src="userchosenimageTop" :style="userchosenimagetopstyle()" class="img-fluid" id="Top">

After some pain and great help here, I achieved the convertion from HTML to JPG , but now I'm stuck with a problem. The good to use wkhtmltoimage is really about how it correctly handle all the weird style properties, but to achieve this goal it needs some properties in webkit grammar, -webkit-transform: rotateX(... . To send the html from the user manipulated div to wkhtmltoimage I grab the html from my div container like this:

 var canvasHtml = document.getElementById('divwithimagesandtransformations').innerHTML;

so the style properties are already "printed" into the html code, and then I send this code via PHP post to wkhtmltoimage and everything works exepct. Html elements styles are converted to the user browser, so -webkit-transform = rotate... becomes just trasform: rotate and this cause elements don't being correctly rendered in the exported jpg. Any help on how I can keep copy of not browser-computed style for each element? I thought about recreate the html in a javascript var, but they're several images contained into the same one, so it seems a messy solution to me.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire