javascript - 使用 Fabricjs 在形状内绘制图像

Question

我目前正在使用画布和 Javascript 进行图像处理。我正在使用fabric.js。我只是希望用户上传一张图片并将其与我们提供的模板合并。IE。，

我只想在中心的空圆圈中显示上传的图像，他们可以通过拖动来调整它。

• 如果我将模板保留为上层，则用户无法拖动和调整，因为画布上充满了模板。
• 如果我将上传的图像保留为上层，则图像将溢出圆圈。

如何通过为我的用户提供易于使用的界面来解决这个问题？我尝试在fabric.js 中使用ClipTo函数，但它不适用于图像对象。

Answer 1

我认为overlayImage是你所追求的。

以定制演示为例：

var canvas = new fabric.Canvas('c13');
var circle = new fabric.Circle({ 
  radius: 30, 
  fill: '#f55', 
  top: 100, 
  left: 100 
});
canvas.add(circle);
canvas.setOverlayImage('../assets/jail_cell_bars.png', 
  canvas.renderAll.bind(canvas));

Answer 2

You could draw both the photo and the template into the canvas. I'm not sure about fabric.js, but if you called the canvas functions directly you would simply...

ctx = canvas.getContext('2d');
ctx.DrawImage(user_img, x,y);
ctx.DragImage(template_imb, 0, 0);

When the user drags the mouse update x and y and redraw both layers. Obviously make sure the hole in the template is transparent. You can add width and height to the DrawImage call if you want the user to be able to resize the image, just provide some kind of control the change them.

Answer 3

更困难的方法是创建一个临时（离屏）画布。使用globalCompositeOperation=source-in，在蒙版图像上绘制图像，然后getImageData从那里putImageData绘制到目标画布上。

但如果查尔斯的回答对你有用，那就更直接了。