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();行之前添加此代码：

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

为了测试我是否正在绘制一个形状，它会通过dataURL过程保存它。当我测试它时，通过点击“按钮”按钮，它打开了一个新窗口，瞧！我能够在其中看到并保存带有浅蓝色矩形的画布图像......但没有背景图像，也没有文字......没有别的。我真的不明白什么是错的。谢谢！

Answer 1

移动此行

var dataUrl = oCanvas.toDataURL();

在button.onclick处理程序中。

在您创建数据URL的那一刻，窗口元素和任何img元素都没有触发其load事件，因此没有绘制任何内容。

Canvas datatoURL不保存画布内容

1 个答案: