Вставка холста в тег 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 (обратите внимание: это может быть или не быть в случае вашей последней страницы, но из скрипки это очевидно - я скопировал изображение на хост который поддерживает использование поперечного происхождения).
• Вы можете установить источник изображения напрямую с данными-uri toDataURL().
• Обязательно извлеките данные-uri ПОСЛЕ того, как изображение загрузилось правильно и было нарисовано, т.е. внутри обработчика onload, иначе вы рискуете получить пустой холст и строку. Вероятно, вы также захотите назвать свой следующий шаг в коде.

Modified fiddle