将Canvas插入img标签

debugcn 发表于 Dev

奥斯卡娃迪

我想将画布数据插入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...

})

在这里提琴的问题

提前致谢

用户名

确保从同一来源（通常是域）加载图像，或者您需要设置crossOrigin为匿名（请参见小提琴），否则在将图像提取到data-uri时会出现安全错误（请注意：这可能是最后一页的情况，但从小提琴来看，这很明显-我将图像复制到了支持跨域使用的主机上。
您可以使用data-uritoDataURL()返回值直接设置图像源。
确保提取数据-uri AFTER图像已正确加载并绘制完毕，即。在onload处理程序中，否则您将冒以空画布和字符串结尾的风险。您可能还希望从这里在代码中调用下一步。