canvas.toDataURL()不能正常工作

Question

我有一个画布，在其中使用以下代码上传图像：

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

现在我想使用canvas.toDataURL()将图像加载到另一个画布上。 代码如下：

现在我希望使用canvas.toDataURL()将图像加载到另一个画布中。代码如下：

var dataURL = canvas.toDataURL();
drawDataURIOnCanvas(dataURL,canvas2);

    function drawDataURIOnCanvas(dataURL, name_of_canvas) {

    var myCanvas = document.getElementById(name_of_canvas);
    var img3 = new Image;
    var ctx2 = myCanvas .getContext('2d');
    img3.onload = function(){
       ctx2.drawImage(img3,0,0); // Or at whatever offset you like
    };
    img3.src = dataURL;
}

如果我使用一个有效的URL，一切都很好。但是我尝试过的所有图片生成的URL如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII=.

如果你尝试使用它，将无法生成画布中的飞机照片。我该如何使用toDataURL函数将图像绘制在另一个画布上？

- mpla_mpla

---

如果您尝试使用它，它将无法在画布中生成飞机的照片。 - mpla_mpla

我已经编辑了你的问题，以解释“不起作用”到底是什么意思。在等待答案的同时，你可以参观[tour]和[help]。 - rene

我在你的代码中看到了一些问题。在这里删除canvas名称变量周围的引号：var myCanvas = document.getElementById('name_of_canvas');，在这里使用myCanvas而不是canvas：var ctx2 = canvas.getContext('2d');。 - Niddro

谢谢你的修复，虽然那不是问题所在，之前它是可以工作的，只是因为我复制粘贴时出了错。问题在于它无法为任何图片提供正确的dataurl值。在你的系统中，你能让这个工作吗？ - mpla_mpla

你需要在画布上绘制图像后才调用 toDataURL 函数。否则，你的画布肯定是空的... - Kaiido

Answer 1

你可以在developer.mozilla.org查看使用HTMLCanvasElement.toDataURL()的示例。 toDataURL返回有效的base64编码图像。因此问题是如何将此图像分配给第二个画布。

- outoftime

---

不，我已经将一个有效的base64传递到了另一个画布。问题应该出在dataURL上。但是，如果您能使用以上代码将图像上传到第一个画布并获取有效的base64，那么我会很乐意接受答案:) - mpla_mpla