0
185
Views-webkit-mask-image is not working html2canvas render
I am trying to do template poster editor. I would like to add a image to my canvas while masking it. It works well, i can mask every photo that i want but when i try to render it, added image is rendered without any mask-image. How can i fix it?
This is my canvas
This is the result
Code:
function capture() {
$('#target').html2canvas({
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/jpeg", 1.0);
name = document.getElementById("konukAdi").value
name = name.replace(/\s/g, '')
extname = document.getElementById("boyut-secimi").value
a.download = name + extname + '.jpg';
a.click();
}
});
}top: 16.12%;
left: 55.9%;
-webkit-mask-size: contain;
-webkit-mask-image: url(/poster/images/masks/tercih.png)!important;
z-index: 15;
overflow: hidden;
width: 620px;
height: auto;
position: absolute;<img src="" id="id_1" class="konukImg" onclick="dragImage(this);" style="mask-image: url(/poster/images/masks/tercih.png) !important; top:16.12%;left:55.9%; -webkit-mask-size:contain;-webkit-mask-image: url(/poster/images/masks/tercih.png)!important; ;z-index : 15;overflow : hidden; width:620px;height:auto; position : absolute;">
·
Juan Pablo Isaza
Answer question