如何在织物画布中使用背景图像获取绘图路径中的图像?

Posted

技术标签:

【中文标题】如何在织物画布中使用背景图像获取绘图路径中的图像?【英文标题】:how to get the image in drawing path with background image in fabric canvas? 【发布时间】:2017-03-20 08:48:23 【问题描述】:

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

    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


【问题讨论】:

【参考方案1】:

你可以这样做:

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/

【讨论】:

以上是关于如何在织物画布中使用背景图像获取绘图路径中的图像?的主要内容,如果未能解决你的问题,请参考以下文章

在画布中设置背景图像(织物js)

我们如何在 php 中使用织物 Js 对画布上的图像执行相同的操作(缩放和旋转)?

如何将图像添加到织物画布?

设置织物js画布的100%高度和宽度

可拖动图像上的画布绘图

当图像重新缩放以适合画布时,织物 js 上的裁剪功能无法正常工作