HTML5 Canvas+JavaScript：上传图片画布绘制矩形时图片消失求助

嘿，我来帮你搞定这个问题！你遇到的图片消失情况，大概率是因为混用了原生Canvas上下文操作和Fabric.js的对象管理逻辑，或者没有正确把图片和矩形都作为Fabric的对象来处理。先给你分析问题，再给修复后的完整代码。

问题根源 #

Fabric.js是基于对象模型来管理画布元素的，所有图片、图形都应该是Fabric提供的对象（比如fabric.Image、fabric.Rect），并通过canvas.add()添加到画布中。如果你的代码里直接用原生Canvas的getContext('2d')来绘制矩形，就会绕过Fabric的对象管理，当Fabric触发重新渲染时，直接绘制的内容会被覆盖，而如果图片也没正确转为Fabric对象，就会直接消失。

修复后的完整代码 #

先补全HTML部分（需要一个文件上传框和画布）：

<canvas id="panel" width="800" height="600" style="border:1px solid #ccc;"></canvas>
<input type="file" id="uploadImage" accept="image/*" style="margin:10px 0;">

然后是JavaScript部分，全程用Fabric的对象来处理图片和矩形：

(function() {
  // 初始化Fabric画布
  var canvas = new fabric.Canvas('panel');
  var isDown = false;
  var startPosition = {};
  var currentRect = null;
  var drawingMode = true;

  // 处理图片上传：把上传的图片转为Fabric.Image对象添加到画布
  document.getElementById('uploadImage').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(event) {
      fabric.Image.fromURL(event.target.result, function(img) {
        // 让图片适配画布尺寸（也可以保持原尺寸，调整left/top即可）
        img.set({
          left: 0,
          top: 0,
          scaleX: canvas.width / img.width,
          scaleY: canvas.height / img.height
        });
        canvas.add(img);
        // 把图片放到最底层，确保矩形在图片上方
        canvas.sendToBack(img);
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  });

  // 鼠标按下：创建临时矩形对象
  canvas.on('mouse:down', function(event) {
    if (!drawingMode) return;
    var pointer = canvas.getPointer(event.e);
    isDown = true;
    startPosition.x = pointer.x;
    startPosition.y = pointer.y;
    // 创建半透明的临时矩形，方便拖动预览
    currentRect = new fabric.Rect({
      left: startPosition.x,
      top: startPosition.y,
      width: 0,
      height: 0,
      fill: 'rgba(255, 0, 0, 0.3)',
      stroke: 'red',
      strokeWidth: 2
    });
    canvas.add(currentRect);
  });

  // 鼠标移动：实时更新矩形的尺寸和位置
  canvas.on('mouse:move', function(event) {
    if (!isDown || !drawingMode) return;
    var pointer = canvas.getPointer(event.e);
    var width = pointer.x - startPosition.x;
    var height = pointer.y - startPosition.y;
    // 处理从右下往左上拖动的情况，保证矩形位置正确
    currentRect.set({
      width: Math.abs(width),
      height: Math.abs(height),
      left: width < 0 ? pointer.x : startPosition.x,
      top: height < 0 ? pointer.y : startPosition.y
    });
    canvas.renderAll();
  });

  // 鼠标松开：结束矩形绘制
  canvas.on('mouse:up', function() {
    isDown = false;
    currentRect = null; // 清空临时矩形引用
  });
})();

关键注意事项 #

• 所有画布元素都要用Fabric的对象创建，不要直接操作原生Canvas上下文。
• 上传图片时一定要转为fabric.Image并调用canvas.add()，这样Fabric会把它纳入管理，不会丢失。
• 绘制矩形时用临时对象实时更新，鼠标松开后完成绘制，整个过程不会影响已有的图片元素。

内容的提问来源于stack exchange，提问作者Harshitha Raj