[英]HTML5 canvas toDataURL not working with an image on the canvas
我想做的是将本地保存的图像绘制到画布上。 然后,我想将该画布转换为png图像。 该图像加载到画布上,但是我创建的png图像为空白。 有谁知道如何解决这一问题?
<!DOCTYPE html> <html> <head> </head> <body> <img src="" id="canvasImage" /> <canvas id="canvasId" width="160" height="145"></canvas> <script> var canvas = document.getElementById('canvasId'); var context = canvas.getContext("2d"); image = new Image(); image.src = "images/rightarrow.png"; image.onload = function(){ context.drawImage(image, 0, 0); } var imgTag = canvas.toDataURL("image/png"); document.getElementById("canvasImage").src = imgTag; </script> </body> </html>
您需要在onload
处理程序中创建映像
image = new Image();
image.src = "images/rightarrow.png";
image.onload = function(){
context.drawImage(image, 0, 0);
var imgTag = canvas.toDataURL("image/png");
document.getElementById("canvasImage").src = imgTag;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.