Canvas datatoURL不保存canvas内容

Question

我正在尝试使用Html5画布中的toDataURL在新窗口中将图像导出为PNG文件。

这是我的JS代码(我想你们需要全部看一看，看看有没有什么问题)

var oCtx;
var oCanvas;
var img;
var oImg;

function updateClicked() {


    oCanvas.width = oCanvas.width;
    oCtx.drawImage(img,0,0); 

    oCtx.font = "normal 23px arial";     // different font
oCtx.textBaseline = "top";           // text baseline at the top
oCtx.fillStyle = "#666";
oCtx.fillText(document.getElementById("attentionde").value, 255, 365);

oCtx.font = "bold 28px arial";     // different font
oCtx.fillStyle = "red";
oCtx.fillText(document.getElementById("nofacture").value, 172, 226);

}
// setup our test canvas
// and a simple drawing function
window.onload = function() {
    oCanvas = document.getElementById("thecanvas");
    oCtx = oCanvas.getContext("2d");

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

    img=new Image();
    img.src="Fond_Facture_Medio.jpg"; //My background image source

//BACKGROUND-IMAGE//
img.onload = function(){
oCtx.drawImage(img,0,0);  

};

var dataUrl = oCanvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=1275, height=1650");
}  
}​

当我点击我的按钮(“id= button”)时，...it确实打开了一个新窗口，里面有一个PNG文件，但是png是blank...Seems的，因为未知的原因，它没有得到在画布上绘制的图像。

我尝试在var dataUrl = oCanvas.toDataURL();行之前添加以下代码：

oCtx.fillStyle = "rgba(0, 0, 255, .5)";
oCtx.fillRect(25, 25, 125, 125);

只是为了测试我是否绘制了一个形状，它将通过dataURL过程保存它。当我测试它时，通过点击“the button”按钮，它打开了一个新的窗口，瞧！我能够在it...but中看到并保存带有浅蓝色矩形的画布图像，没有背景图像，也没有其他text...nothing。我真的不明白出了什么问题。谢谢!

Answer 1

移动此行

var dataUrl = oCanvas.toDataURL();

在button.onclick处理程序内部。

在创建数据URL时，window元素和任何img元素都没有触发其load事件，因此没有绘制任何内容。