我想要一个图像输入,当选择该输入时,允许用户通过单击画布来重新绘制所选图像。我目前有这样的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在画布上绘制的图像?