将Canvas插入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...
})

这里的问题小提琴

提前感谢

Answer 1

• 请确保图像是从同一来源（通常是域）加载的，或者您需要将crossOrigin设置为匿名（请参阅fiddle），否则在将图像提取到数据uri时会出现安全错误（请注意：您的最终页面可能是这样，也可能不是这样，但从fiddle中可以看出这一点-我将图像复制到了支持跨来源使用的主机上）
• 您可以使用toDataURL()返回的数据uri直接设置图像源
• 请确保在图像正确加载并绘制后提取数据uri，即在onload处理程序中提取，否则可能会出现空画布和字符串。您可能也想从这里调用代码中的下一步

改良小提琴