如何在布料画布中使用背景图像获取图像路径中的图像？

Question

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

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 

} 

Answer 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/