Javascript canvas.toDataUrl() 将图片发送到新窗口中的 <img> 元素

Question

我在这里做错了什么？

我试图通过打开一个新窗口并在使用 css 定位在页面上的 img 元素中显示 .png 来保存 Canvas 绘图。

从那里您可以选择下载或共享它。

到目前为止我已经有了这个，但是 img src 没有被 toDataUrl() 填充；

function saveDrawing() {
    var url = canvas.toDataURL(); 
    window.open('saveimage.php'); 
    var placeholder = document.getElementById("placeholder");  
    placeholder.src = url;  
}

有什么想法吗？谢谢!

Answer 1

document.getElementById("placeholder"); 不是在新打开的窗口中查找该 ID，而是在当前窗口中查找。 您所要做的就是引用新创建的窗口的文档:

function saveDrawing() {
    var url = canvas.toDataURL(); 
    w = window.open('saveimage.php'); 
    w.onload = function(){
        var placeholder = w.document.getElementById("placeholder");  
        placeholder.src = url;
    };  
}

这可能会有错误，想法是在 w 中存储对新窗口的引用，然后在加载时访问它的 DOM 来修改图像 src