fabric.js 组件 图片上传裁剪并进行自定义区域标记

在Fabric.js中，您可以使用Image类来加载和处理图片，并使用Canvas类来创建和编辑画布。以下是一个简化的代码示例，展示了如何上传图片、裁剪并使用自定义区域标记：

// 初始化Fabric.js的Canvas实例
var canvas = new fabric.Canvas('c');
 
// 创建一个加载图片的函数
function loadImageAndCrop(url, cropRect) {
  // 加载图片
  fabric.Image.fromURL(url, function(img) {
    // 设置裁剪区域
    img.set({
      left: cropRect.left,
      top: cropRect.top,
      width: cropRect.width,
      height: cropRect.height
    });
 
    // 将裁剪后的图片添加到画布
    canvas.add(img);
  });
}
 
// 选择文件并上传
function uploadAndCropImage() {
  var input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*';
  input.onchange = function() {
    var file = input.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      // 加载图片到画布
      loadImageAndCrop(e.target.result, { left: 50, top: 50, width: 200, height: 200 });
    };
    reader.readAsDataURL(file);
  };
  input.click();
}
 
// 调用函数上传并处理图片
uploadAndCropImage();

在这个例子中，loadImageAndCrop函数负责加载图片并裁剪。uploadAndCropImage函数则是触发文件上传的过程，并处理文件读取结果。在实际应用中，您可以根据需要调整裁剪区域和其他参数。