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