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图像被加载到画布中，然而，当新窗口使用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;

}

});

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

1 个答案: