将Canvas插入img标记

时间:2014-10-22 08:18:38

标签: javascript jquery html html5 canvas

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

提前致谢

1 个答案:

答案 0 :(得分:3)

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

<强> Modified fiddle