无法从画布中动态加载的图像源访问 DataURL 数据

Question

这就是我正在做的事情：我有一个包含 li 元素的 ul，其中的图像来自主目录中的“/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 图像已加载到画布中，但是，当弹出带有 toDataURL 信息的新窗口时，我似乎得到的只是一个透明画布。有人对此有解决方案吗？

Answer 1

在上面的代码中，您尝试在将图像保存到其中之前复制数据 URL，因此图像似乎是透明的。将图像传递给它后复制 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;

}

});