如何利用织物画布上的背景图像获取绘图路径中的图像

how to get the image in drawing path with background image in fabric canvas?

本文关键字：图像 背景 获取 绘图 路径 何利用      更新时间：2023-09-26

我想要套索裁剪织物帆布。现在我可以在画布上画路径。但我不知道如何切割路径与背景图像。我有办法保存剪切的图像吗?这是我的代码

    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');
    const img = document.createElement('IMG');
    const base64data = canvas.toDataURL("image/jpeg")

    img.onload = function() {
        const OwnCanv = new fabric.Canvas('c', {
            isDrawingMode: true
        });

        canvas.width = img.width;
        canvas.height = img.height;
        const imgInstance = new fabric.Image(img, {
            async: false,
            left: 0,
            top: 0,
            lockMovementX: true,
            lockMovementY: true
        });
        OwnCanv.add(imgInstance);

        OwnCanv.freeDrawingBrush.color = "purple"
        OwnCanv.freeDrawingBrush.width = 5
        OwnCanv.on('path:created', function(option) {
            const path = option.path;
            OwnCanv.isDrawingMode = false;
            OwnCanv.remove(imgInstance);
            OwnCanv.remove(path);
            OwnCanv.clipTo = function(ctx) {
                path.render(ctx);
            };
            OwnCanv.add(imgInstance);
        });
    }
img.src = base64data
}

你可以这样做:

OwnCanv.on('path:created', function(option) {
  var path = option.path;
  imgInstance.clipTo = function(ctx) {
      //save context state
      ctx.save();
      //reset context tranformation matrix
      ctx.setTransform(1,0,0,1,0,0);
      //render the path
      path.render(ctx);
      //restore context state
      ctx.restore();
  };
  OwnCanv.renderAll();      
});

请看这里:https://jsfiddle.net/f82omjsr/

相关文章：