將畫布插入img標記

Question

我想要將畫布數據插入到img標記中。這可能嗎？

<canvas id="myCanvas" width="200px" height="200px" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> 

<img id="insertHereTheCanvas" src="" alt="" width="200px" height="200px" style="border:1px solid #d3d3d3;"></img> 

如果我使用canvas.toDataURL("image/png");我可以看到一個值如何：data:image/png;base64,iVBORw...

但我想，以填補img標籤內容，並加載相同的圖像比畫布。這是我到目前爲止的代碼：

$(document).ready(function(){ 
    var c=$("#myCanvas")[0]; 
    var ctx = c.getContext("2d"); 
    var img = new Image(200,200); 
    img.src = "http://www.nimbosfera.com/uploads/empresas/empresa-235.jpg?20140920"; 
    img.onload = function() { 
     ctx.drawImage(img,0,0); 
     ctx.textAlign="center"; 
     ctx.font = "12pt Courie bold"; 
     ctx.fillText("MI TEXTO", 100, 150); 
    } 


    var dataURL = c.toDataURL("image/png"); 
    alert(dataURL); // data:image/png;base64,iVBORw... 

}) 

Here the question on fiddle

在此先感謝

Answer 1

• 確保圖像是從同一產地（通常域）加載，或者你需要設置crossOrigin匿名（見小提琴），否則在將圖像提取到data-uri時會出現安全錯誤（請注意：最終頁面可能並非如此，但從小提琴中可以看出 - 我將圖像複製到主機它支持跨源使用）。
• 您可以直接使用data-uri toDataURL()返回來設置圖像源。
• 確保提取數據-Uri AFTER圖像已正確加載並繪製完成，即。在onload處理程序中，否則您將冒着以空畫布和字符串結尾的風險。您可能還想從這裏調用代碼的下一步。

Modified fiddle