toDataURL() is saving the black overlay/background, that is drawn on canvas; but not the image drawn on the same canvas through a link. If I only draw an image and try to save it as an image, the transparent image is saved...
I have researched many thing but nothing worked in my case. Please help!
Image link: http://ift.tt/294ua2S;gda=1477014978_08b04c9b05ec32ad5122bf747e5ef066
I have attached an image for better understanding... enter image description here
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
</style>
</head>
<body>
<?php
$user=$_POST['h'];
?>
<canvas id="can" width=250 height=250 ></canvas>
<script type="text/javascript">
//first canvas
var c = document.getElementById('can');
c.setAttribute('crossOrigin','anonymous');
var ctx = c.getContext("2d",{preserveDrawingBuffer: true});
var img = new Image();
img.addEventListener("load", function() {
ctx.drawImage(img, 0, 0);
}, false);
img.src = '<?php echo $user ?>';
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "rgba(0,0,0,0.5)";
ctx.fillRect(0,0,c.width,c.height);
var sent = convertToImg(c);
document.body.appendChild(sent);
console.log(sent);
function convertToImg(imgc) {
var img = new Image;
img.src = imgc.toDataURL("image/png");
return img;
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire