畫布數據到URL不保存畫布內容

Question

我正在嘗試使用Html5 Canvas中的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 =“ thebutton”）...時，它確實打開了一個帶有PNG文件的新窗口，但是png為空白...好像它沒有在Canvas中繪制圖像一個未知的原因。

我嘗試在var dataUrl = oCanvas.toDataURL();之前添加此代碼var dataUrl = oCanvas.toDataURL(); 行：

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

只是為了測試我是否正在繪制形狀，它會通過dataURL流程保存它。 當我測試它時，通過單擊“ thebutton”按鈕，它打開了一個新窗口，瞧！ 我能夠看到並保存其中帶有淺藍色矩形的畫布圖像...但是沒有背景圖像，也沒有文本...其他。 我真的不明白怎么了。 謝謝！

Answer 1

移動這條線

var dataUrl = oCanvas.toDataURL();

在button.onclick處理程序中。

創建數據URL時，window元素和img元素均未觸發其load事件，因此未繪制任何內容。