javascript - 无法从 Canvas 中动态加载的图像源访问 toDataURL 数据

Question

这就是我正在做的:我有一个 ul，其中包含 li 元素，其中的图像来自主目录中的“/images”文件夹。

<section class="main">
            <ul id="st-stack" class="st-stack-raw">
                <li><div class="st-item"><img src="images/cards-01.png" class ="cardButton" /></div><div class="st-title"></div></li>
                <li><div class="st-item"><img src="images/cards-02.png" class ="cardButton" /></div><div class="st-title"></div></li>
            </ul>
</section>

    <div class="rightside">
        <canvas id="sketchpad" class="sketchpad" height="400" width="300">
        </canvas>
        <canvas id="sketchpad2" class="sketchpad" height="400" width="300">
        </canvas>
    </div>

然后我有一个 javascript 文件，我的 html 链接到放置以下代码的位置:

$(document).ready(function() {

var myCanvas = document.getElementById("sketchpad");
var context = myCanvas.getContext("2d");


var startX = 0,
startY = 0;

$(".main").click(function(event) {

var target = $(event.target);

if (target.hasClass("cardButton")) {
var srcimg = $(target).attr("src");
draw(srcimg);
}

else {
return false;
}

var image_data = myCanvas.toDataURL("image/png");
window.open(image_data, '_blank', "location=0, menubar=0");
});

function draw(source){
var img = document.createElement("img");
img.onload = function(){
context.drawImage(img, startX, startY, 300, 400);
}
img.src = source;

}

});

我想简单地访问 toDataURL 图像，并在单击 li img 元素时在新窗口中打开它。 li 图像已加载到 Canvas 中，但是，当新窗口弹出并显示 toDataURL 信息时，我似乎得到的只是透明 Canvas 。有人有解决办法吗？

Answer 1

在上面的代码中，您尝试在将图像保存到其中之前复制数据 URL，以便图像看起来是透明的。将图像传递给 DataURL 后复制 DataURL。

这是您的工作代码:http://codepen.io/anon/pen/oYMoJm?editors=0010请注意，window.open 是弹出窗口，将被浏览器阻止，我们必须手动允许它。

这是更新后的 JS 代码:

$(document).ready(function() {

var myCanvas = document.getElementById("sketchpad");
var context = myCanvas.getContext("2d");


var startX = 0,
startY = 0;

$(".main").click(function(event) {

var target = $(event.target);

if (target.hasClass("cardButton")) {
var srcimg = $(target).attr("src");
draw(srcimg);
}

else {
return false;
}
});

function draw(source){
var img = document.createElement("img");
img.onload = function(){
context.drawImage(img, startX, startY, 300, 400);
  var image_data = myCanvas.toDataURL("image/png");
window.open(image_data, '_blank', "location=0, menubar=0");

}
img.src = source;

}

});