Question

我和我的朋友正在尝试使用 JavaScript 将图像添加到画布；然而，我们甚至不知道如何做到这一点，我们已经尝试了所有可能的涉及绘制图像的代码字符串（例如来自谷歌的代码等），但都失败了，我们甚至不知道哪个方向是正确的在这一点上采取。任何人都可以帮忙吗？谢谢！

Answer 1

这是您正在寻找的基本示例。

document.getElementById('inp').onchange = function(e) {
  var img = new Image();
  img.onload = draw;
  img.onerror = failed;
  img.src = URL.createObjectURL(this.files[0]);
};
function draw() {
  var canvas = document.getElementById('canvas');
  canvas.width = this.width;
  canvas.height = this.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(this, 0,0);
}
function failed() {
  console.error("The provided file couldn't be loaded as an Image media");
}

<input type="file" id="inp">
<canvas id="canvas"></canvas>

绘制图像功能

1 个答案: