如何在布料畫布中使用背景圖像獲取圖像路徑中的圖像？

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/