0

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

这是代码：http: //jsfiddle.net/9kQPk/

它应该很简单，我创建了一个画布，使用“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;

谢谢！

4

1 回答 1

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";

请注意，图像必须与绘制它的网页具有相同的来源才能保存。

演示
代码

于 2013-09-24T00:18:24.563 回答