如何重用图像输入中的图像进行绘图

时间:2018-06-25 18:03:36

标签: javascript html5-canvas

我想要一个图像输入,当选择该输入时,允许用户通过单击画布来重新绘制所选图像。我目前有这样的HTML:

<html>
   <body>
      <canvas id="canvas" width="400" height="400" onclick="stamp(event)"></canvas>
      <input type="image" id="foo" src="foo.png" onclick="set_stamp('foo')">
   </body>
</html>

和javascript:

var STAMP_IMG = null;

function stamp(event) {
   if(STAMP_IMG == null) { return; }
   let canvas = document.getElementById("canvas");
   let canvas_ctx = canvas.getContext("2d");
   canvas_ctx.drawImage(event.offsetX, event.offsetY, STAMP_IMG.width, STAMP_IMG.height);
}

function set_stamp(inputId) {
   var img = document.getElementById(inputId);
   STAMP_IMG = /* what goes here? */
}

如何引用input elemenet在画布上绘制的图像?

0 个答案:

没有答案