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

Question

Here's what I'm doing: I have a ul that contains li elements with an image sourced locally from "/images" folder in the main directory.

<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>

I then have a javascript file that my html links to where the following code is placed:

$(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;

}

});

I want to simply access the toDataURL image and open it up in a new window when the li img element is clicked. The li image is loaded into the canvas, however, all I seem to get is a transparent canvas when the new window pops open with the toDataURL information. Does anyone have a solution for this?

Answer 1

In the above code you are trying to copy data URL before image is saved into it so image seems to be transparent. Copy DataURL after image is passed to it.

Here is pen for your workig code : http://codepen.io/anon/pen/oYMoJm?editors=0010 Note that window.open is popup and will be blocked by browser we have to allow it manually.

Here is your updated JS code :

$(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;

}

});