插入img标签到Canvas元素

我试图将一个图像插入一个canvas元素。以此代码为例（http://jsfiddle.net/n3L6e1wp/）。我想用img标签替换画布中显示的文本。我试着通过更换div的内容：插入img标签到Canvas元素

<img src='<%= asset_path('layout/image.jpg') %>' id='picture' style='max-height:100%'>

但没有显示，我甚至不知道我能做到这一点。

在此先感谢！

2015-09-08 Danny

你不能把图像的'内'......你可以将它们绘制到画布上 – Alex

画布drawImage方法将接受一个html img元素作为图象源，所以可以直接做：

ctx.drawImage(document.getElementById('picture'),0,0);

实施例的代码和一个演示：

window.onload=function(){ 
 
    var canvas=document.getElementById("canvas"); 
 
    var ctx=canvas.getContext("2d"); 
 
    ctx.drawImage(document.getElementById('picture'),0,0); 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas> 
 
<!-- src is for this demo. You can still use your <%...%> --> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/sun.png' id='picture' style='max-height:100%'>

来源

2015-09-08 20:32:38 markE

请注意，您需要在加载所有内容（或者特别是加载图像元素）时运行该JS代码。因此需要将其包裹在：'的window.onload =函数（）{...}' –

@SpencerWieczorek是的，总是包裹的帆布JS代码'.onload'或'$（函数（）{}'难道你必须运行演示一个问题 - 我想栈片断包裹JS自动有载 – markE

我也以为，但是，是它似乎'onload'在Chrome至少也许代码封装后仅绘制。包裹在'document.ready'中呢？ –

试试这个代码，将正常工作。

var canvas = document.getElementsByTagName('canvas'), 
var content = canvas.getContext('2d'); 

function insertImage() { 
    image = new Image(); 
    image.src = 'assets/img.png';  //any img src 
    image.onload = function(){ 
    content.drawImage(image, 300, 300); 
    } 
} 

insertImage();

来源

2015-09-08 10:11:29 WisdmLabs

事情是，我用JS改变图像。我有一张表格，当我加载一张图片时，我希望这张图片能够画在画布上。这就是为什么我试图保持我的语法。也许有另一种解决方案... – Danny

@Danny你可以通过执行：document.getElementById（'picture'）。src'从HTML页面获取图像'src'。 –

插入img标签到Canvas元素

回答

相关问题