Javascript 当我在上传的文件图片上画鼠标点击矩形时，图片突然消失了

我是HTML5画布和JavaScript新手，我尝试在画布上绘制多个鼠标点击，移动文件上传图像上的矩形，如何做到这一点？我尝试了一些想法，但当我在图像画布上绘制矩形时，图像突然消失了

这里是我的代码：

（功能（）{
var canvas=newfabric.canvas（'panel'）；
var-line，isDown，startPosition={}，rect，drawingMode=true；
canvas.on（'mouse:down'，函数（事件）{
如果（！drawingMode）返回；
isDown=真；
日志（event.e.clientX，event.e.clientY）；
startPosition.x=event.e.clientX；
startPosition.y=事件e.clientY；
控制台日志（起始位置）；
rect=新结构。rect({
左：event.e.clientX，
顶部：event.e.clientY，
宽度：0，
高度:0,，
笔划：'红色'，
冲程宽度：3，
填充：“”
});
canvas.add（rect）；
});
canvas.on（'mouse:move'，函数（事件）{
如果（！isDown | |！drawingMode）返回；
rect.setWidth（Math.abs（event.e.clientX-startPosition.x））；
rect.setHeight（Math.abs（event.e.clientY-startPosition.y））；
canvas.renderAll（）；
});
on（'mouse:up'，function（）{
isDown=假；
canvas.add（rect）；
//窗口提示（“hi”）；
});
canvas.on（'object:selected'，function（））{
drawingMode=false；
});
canvas.on（'object:selected'，function（））{
drawingMode=false；
});
canvas.on（'selection:cleared'，function（）{
drawingMode=true；
});
})();
函数el（id）{return document.getElementById（id）；}//按id获取元素
var canvas=el（“面板”）；
var context=canvas.getContext（“2d”）；
函数readImage（）{
if（this.files&&this.files[0]）{
var FR=new FileReader（）；
FR.onload=功能（e）{
var img=新图像（）；
img.addEventListener（“加载”，函数（）{
drawImage（img，0,0700450）；
});
img.src=e.target.result；
};       
FR.readAsDataURL（this.files[0]）；
}
}
el（“文件上传”）。添加了EventListener（“更改”，readImage，false）；

你想要这样吗

看看这个

#帆布{
背景色：白色；
}
var-lineOffset=4；
var Anchorsize=2；
var mousedown=false；
var clickedArea={box:-1，pos:'o'}；
var-x1=-1；
变量y1=-1；
变量x2=-1；
变量y2=-1；
变量框=[]；
var-tmpBox=null；
document.getElementById（“panel”）.onmousedown=函数（e）{
mousedown=true；
单击区域=查找当前区域（e.offsetX，e.offsetY）；
x1=e.offsetX；
y1=e.offsetY；
x2=e.offsetX；
y2=e.offsetY；
};
document.getElementById（“panel”）.onmouseup=函数（e）{
if（clickedArea.box==-1&&tmpBox！=null）{
盒。推送（tmpBox）；
}否则如果（单击区域框！=-1）{
var selectedBox=框[单击区域框]；
如果（selectedBox.x1>selectedBox.x2）{
var previousX1=selectedBox.x1；
selectedBox.x1=selectedBox.x2；
selectedBox.x2=先前的x1；
}
如果（selectedBox.y1>selectedBox.y2）{
var previousY1=selectedBox.y1；
selectedBox.y1=selectedBox.y2；
selectedBox.y2=之前的y1；
}
}
点击区域={框：-1，位置：'o'}；
tmpBox=null；
mousedown=false；
控制台日志（框）；
};
document.getElementById（“panel”）.onmouseout=函数（e）{
如果（单击区域框！=-1）{
var selectedBox=框[单击区域框]；
如果（selectedBox.x1>selectedBox.x2）{
var previousX1=selectedBox.x1；
selectedBox.x1=selectedBox.x2；
选择Box.x2>previousX1；
}
如果（selectedBox.y1>selectedBox.y2）{
var previousY1=selectedBox.y1；
selectedBox.y1=selectedBox.y2；
已选择Box.y2>previousY1；
}
}
mousedown=false；
点击区域={框：-1，位置：'o'}；
tmpBox=null；
};
document.getElementById（“panel”）.onmousemove=function（e）{
如果（鼠标向下并单击区域框==-1）{
x2=e.offsetX；
y2=e.offsetY；
重画（）；
}else if（鼠标向下并单击区域框！=-1）{
x2=e.offsetX；
y2=e.offsetY；
xOffset=x2-x1；
yOffset=y2-y1；
x1=x2；
y1=y2；
如果（单击区域位置=='i'||
clickedArea.pos==“tl”||
clickedArea.pos==“l”||
clickedArea.pos==“bl”）{
框[clickedArea.box].x1+=xOffset；
}
如果（单击区域位置=='i'||
clickedArea.pos==“tl”||
clickedArea.pos==“t”||
clickedArea.pos==“tr”）{
框[clickedArea.box].y1+=yOffset；
}
如果（单击区域位置=='i'||
clickedArea.pos==“tr”||
clickedArea.pos==“r”||
clickedArea.pos==“br”）{
框[clickedArea.box].x2+=xOffset；
}
如果（单击区域位置=='i'||
clickedArea.pos==“bl”||
单击区域位置==“b”||
clickedArea.pos==“br”）{
框[clickedArea.box].y2+=yOffset；
}
重画（）；
}
}
函数重画（）{
//canvas.width=canvas.width；
var context=document.getElementById（“面板”）.getContext（“2d”）；
context.globalCompositeOperation='destination-over'；
clearRect（0,0800600）；
context.beginPath（）；
对于（变量i=0；i<canvas id="canvas" width="400" height="233" style="border:1px solid red"></canvas>


#canvas {
  background-color: white;
}

<script>
    var lineOffset = 4;
    var anchrSize = 2;

    var mousedown = false;
    var clickedArea = {box: -1, pos:'o'};
    var x1 = -1;
    var y1 = -1;
    var x2 = -1;
    var y2 = -1;

    var boxes = [];
    var tmpBox = null;

    document.getElementById("panel").onmousedown = function(e) {
      mousedown = true;
      clickedArea = findCurrentArea(e.offsetX, e.offsetY);
      x1 = e.offsetX;
      y1 = e.offsetY;
      x2 = e.offsetX;
      y2 = e.offsetY;
    };
    document.getElementById("panel").onmouseup = function(e) {
        if (clickedArea.box == -1 && tmpBox != null) {
        boxes.push(tmpBox);
      } else if (clickedArea.box != -1) {
        var selectedBox = boxes[clickedArea.box];
        if (selectedBox.x1 > selectedBox.x2) {
        var previousX1 = selectedBox.x1;
          selectedBox.x1 = selectedBox.x2;
          selectedBox.x2 = previousX1;
        }
        if (selectedBox.y1 > selectedBox.y2) {
        var previousY1 = selectedBox.y1;
          selectedBox.y1 = selectedBox.y2;
          selectedBox.y2 = previousY1;
        }
      }
      clickedArea = {box: -1, pos:'o'};
      tmpBox = null;
      mousedown = false;
      console.log(boxes);
    };
    document.getElementById("panel").onmouseout = function(e) {
        if (clickedArea.box != -1) {
        var selectedBox = boxes[clickedArea.box];
        if (selectedBox.x1 > selectedBox.x2) {
        var previousX1 = selectedBox.x1;
          selectedBox.x1 = selectedBox.x2;
          selectedBox.x2 > previousX1;
        }
        if (selectedBox.y1 > selectedBox.y2) {
        var previousY1 = selectedBox.y1;
          selectedBox.y1 = selectedBox.y2;
          selectedBox.y2 > previousY1;
        }
      }
      mousedown = false;
      clickedArea = {box: -1, pos:'o'};
      tmpBox = null;
    };
    document.getElementById("panel").onmousemove = function(e) {
      if (mousedown && clickedArea.box == -1) {
        x2 = e.offsetX;
        y2 = e.offsetY;
        redraw();
      } else if (mousedown && clickedArea.box != -1) {
        x2 = e.offsetX;
        y2 = e.offsetY;
        xOffset = x2 - x1;
        yOffset = y2 - y1;
        x1 = x2;
        y1 = y2;

        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tl' ||
        clickedArea.pos == 'l'  ||
        clickedArea.pos == 'bl') {
          boxes[clickedArea.box].x1 += xOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tl' ||
        clickedArea.pos == 't'  ||
        clickedArea.pos == 'tr') {
          boxes[clickedArea.box].y1 += yOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'tr' ||
        clickedArea.pos == 'r'  ||
        clickedArea.pos == 'br') {
          boxes[clickedArea.box].x2 += xOffset;
        }
        if (clickedArea.pos == 'i'  ||
        clickedArea.pos == 'bl' ||
        clickedArea.pos == 'b'  ||
        clickedArea.pos == 'br') {
          boxes[clickedArea.box].y2 += yOffset;
        }
        redraw();
      }
    }

    function redraw() {
      // canvas.width = canvas.width;
      var context = document.getElementById("panel").getContext('2d');
      context.globalCompositeOperation='destination-over';
      context.clearRect(0, 0, 800, 600);
      context.beginPath();
      for (var i = 0; i < boxes.length; i++) {
        drawBoxOn(boxes[i], context);
      }
      if (clickedArea.box == -1) {
        tmpBox = newBox(x1, y1, x2, y2);
        if (tmpBox != null) {
          drawBoxOn(tmpBox, context);
        }
      }
    }

    function findCurrentArea(x, y) {
      for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        xCenter = box.x1 + (box.x2 - box.x1) / 2;
        yCenter = box.y1 + (box.y2 - box.y1) / 2;
        if (box.x1 - lineOffset <  x && x < box.x1 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'tl'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'bl'};
          } else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
        return {box: i, pos:'l'};
          }
        } else if (box.x2 - lineOffset < x && x < box.x2 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'tr'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'br'};
          } else if (yCenter - lineOffset <  y && y < yCenter + lineOffset) {
        return {box: i, pos:'r'};
          }
        } else if (xCenter - lineOffset <  x && x < xCenter + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y1 + lineOffset) {
        return {box: i, pos:'t'};
          } else if (box.y2 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'b'};
          } else if (box.y1 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'i'};
          }
        } else if (box.x1 - lineOffset <  x && x < box.x2 + lineOffset) {
          if (box.y1 - lineOffset <  y && y < box.y2 + lineOffset) {
        return {box: i, pos:'i'};
          }
        }
      }
      return {box: -1, pos:'o'};
    }

    function newBox(x1, y1, x2, y2) {
      boxX1 = x1 < x2 ? x1 : x2;
      boxY1 = y1 < y2 ? y1 : y2;
      boxX2 = x1 > x2 ? x1 : x2;
      boxY2 = y1 > y2 ? y1 : y2;
      if (boxX2 - boxX1 > lineOffset * 2 && boxY2 - boxY1 > lineOffset * 2) {
        return {x1: boxX1,
            y1: boxY1,
            x2: boxX2,
            y2: boxY2,
            lineWidth: 2,
            color: 'red'};
      } else {
        return null;
      }
    }

    function drawBoxOn(box, context) {
      xCenter = box.x1 + (box.x2 - box.x1) / 2;
      yCenter = box.y1 + (box.y2 - box.y1) / 2;

      context.strokeStyle = box.color;
      context.fillStyle = box.color;

      context.rect(box.x1, box.y1, (box.x2 - box.x1), (box.y2 - box.y1));
      context.lineWidth = box.lineWidth;
      context.stroke();

      context.fillRect(box.x1 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x1 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x1 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(xCenter - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, box.y1 - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, yCenter - anchrSize, 2 * anchrSize, 2 * anchrSize);
      context.fillRect(box.x2 - anchrSize, box.y2 - anchrSize, 2 * anchrSize, 2 * anchrSize);
    }

    function el(id){return document.getElementById(id);} // Get elem by ID
    var canvas  = el("panel");
    var context = canvas.getContext("2d");
    var cx=100;

    function readImage() {
        if ( this.files && this.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
           var img = new Image();
           img.addEventListener("load", function() {
             context.drawImage(img, 0, 0, 400, 233);
           });
           img.src = e.target.result;
        };       
        FR.readAsDataURL( this.files[0] );
        }
    }
    el("fileUpload").addEventListener("change", readImage, false);   


<script>