Javascript 如何将图像上传到画布并在其上绘制正方形，然后获得正方形'；协调

我正试图上传一个图像到画布上，并在上面画正方形，得到正方形的坐标，然后将其发送到后端进行密钥识别

但有些地方不对，我不能在我的图像上画正方形

这是我使用的javascript：

    var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var rect = {};
var drag = false;
var imageObj = null;

function init() {
    imageObj = new Image();
    imageObj.onload = function () { ctx.drawImage(imageObj, 0, 0); };
    imageObj.src = 
    canvas.addEventListener('mousedown', mouseDown, false);
    canvas.addEventListener('mouseup', mouseUp, false);
    canvas.addEventListener('mousemove', mouseMove, false);
}

function mouseDown(e) {
    rect.startX = e.pageX - this.offsetLeft;
    rect.startY = e.pageY - this.offsetTop;
    drag = true;
}

function mouseUp() { drag = false; }

function mouseMove(e) {
    if (drag) {
        ctx.clearRect(0, 0, 500, 500);
        ctx.drawImage(imageObj, 0, 0);
        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
        rect.h = (e.pageY - this.offsetTop) - rect.startY;
        ctx.strokeStyle = 'red';
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }
}
//
init();
</script>
<script type="text/javascript">
document.getElementById('imageLoader').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");
}

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var rect={}；
var-drag=false；
var-imageObj=null；
函数init（）{
imageObj=新图像（）；
imageObj.onload=函数（）{ctx.drawImage（imageObj，0，0）；}；
imageObj.src=
canvas.addEventListener（'mousedown'，mousedown，false）；
canvas.addEventListener（'mouseup'，mouseup，false）；
canvas.addEventListener（'mousemove'，mousemove，false）；
}
功能鼠标向下（e）{
rect.startX=e.pageX-this.offsetLeft；
rect.startY=e.pageY-this.offsetTop；
阻力=真；
}
函数mouseUp（）{drag=false；}
函数mouseMove（e）{
如果（拖动）{
ctx.clearRect（0,0500500）；
ctx.drawImage（imageObj，0,0）；
rect.w=（e.pageX-this.offsetLeft）-rect.startX；
rect.h=（e.pageY-this.offsetTop）-rect.startY；
ctx.strokeStyle=‘红色’；
ctx.strokeRect（矩形开始、矩形开始、矩形w、矩形h）；
}
}
//
init（）；
document.getElementById（'imageLoader'）。onchange=函数（e）{
var img=新图像（）；
img.onload=牵引；
img.onerror=失败；
img.src=URL.createObjectURL（this.files[0]）；
};
函数绘图（）{
var canvas=document.getElementById（'canvas'）；
canvas.width=this.width；
canvas.height=this.height；
var ctx=canvas.getContext（'2d'）；
ctx.drawImage（这个，0,0）；
}
函数失败（）{
console.error（“提供的文件无法作为图像媒体加载”）；
}

和HTML：

 <canvas id="canvas" ></canvas>
 <input type="file" id="imageLoader" name="imageLoader"/>

---

您只需将图像分配给imageObj即可

function draw() {
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0,0);

  imageObj = this; //here
}

---

可能是“但有些东西不对”，但您没有告诉我们“有些东西”是什么。如有必要，请用适当的错误消息说明问题所在。@spender图像不在画布上上载。我的方形绘图脚本停止工作