Question

我正在尝试从HTML 5 Canvas生成图像，但它不是从画布“渲染”图像内容。

它应该很简单，我创建一个画布，使用“drawImage”函数设置一些东西和图像，但是当我尝试生成一个img html组件时，画布中的图像不会出现...这里是JS：

$('#drawing').css("visibility", "visible");         
var drawing = document.getElementById("drawing");
var con = drawing.getContext("2d");         
drawing.setAttribute("width", 500);
drawing.setAttribute("height", 200);
con.fillStyle = "#FF0000";
con.fillRect(0, 0, 500, 200);                                           
var img = new Image();
img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";
img.onload = function() {                
    con.drawImage(img, 0, 0, 250, 250);
};

//Generate Image
var drawing = document.getElementById("drawing");
var dataURL = drawing.toDataURL();
document.getElementById("result").src = dataURL;

谢谢！

Answer 1

在绘制图像之前获取画布的内容，将生成的图像代码放在onload函数中

var img = new Image();
img.onload = function() {                
    con.drawImage(img, 0, 0, 250, 250);
    //Generate Image
    var drawing = document.getElementById("drawing");
    var dataURL = drawing.toDataURL();
    document.getElementById("result").src = dataURL;
};
img.src = "http://www.deque.com/wbcntnt928/wp-content/dquploads/jquery_logo.png";

请注意，图片必须与绘制它的网页的原点相同才能保存。

DEMO
Code

为什么HTML 5 Canvas不会绘制图像内容？

1 个答案: