Question

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

find . -maxdepth 1 -type f -name '*.*' -o -exec chmod +x "{}" \;

但没有任何显示，我甚至不确定我能做到这一点。

提前致谢！

Answer 1

canvas drawImage方法将接受html img元素作为图像源，因此您可以直接执行此操作：

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

示例代码和演示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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%'>

＆＃13;

Answer 2

试试这段代码，工作正常。

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();

将img标记插入Canvas元素

2 个答案: