使用 Javascript 画布数据填充 html 文本框

Question

我目前有一个画布，里面有几张图片，当我点击图片时，我使用下面的代码来获取图片的宽度和高度：

canvas.addEventListener('click', function (e) {
   var mouse = myState.getMouse(e);
    var mx = mouse.x;
    var my = mouse.y;
    var shapes = myState.shapes;
    var l = shapes.length;
    for (var i = l-1; i >= 0; i--) {
      if (shapes[i].contains(mx, my)) {
        var mySel = shapes[i];
        myState.selection = mySel;
        myState.valid = false;
            var message = 'Image width*height = ' + mySel.w + '*' + mySel.h;
    alert(message);
        return;
      }
    }

我有一些简单的 HTML 文本框，如下所示：

Width:<input type="text" id="width" size="10">
Height:<input type="text" id="height" size="10">

当我单击图像时，是否可以以某种方式填充具有宽度和高度的文本框？有没有办法可以将宽度和高度放入 php 变量并将该值放入文本框中？我对 Javascript 没有太多经验，所以我不知道这是否可能。

如果有人可以将我推向正确的方向，或者提供示例或有用的链接，那就太好了！

Answer 1

假设 click 事件确实获得了图像的宽度和高度，它就像添加这个一样简单：

document.getElementById('width').value = mySel.w;
document.getElementById('height').value = mySel.h;