無法從canvas中的動態加載圖像源訪問DataURL數據

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; 

} 

});