Нарисуйте изображение в форме, используя Fabricjs

Question

В настоящее время я работаю над обработкой изображений в canvas и Javascript. Я использую fabric.js для этого. Я просто хочу, чтобы пользователь загрузил изображение и слил его с предоставленным нами шаблоном. то есть.,

Я хочу показать загруженное изображение только в пустом кружке в центре, и его можно настроить, перетаскивая его.

• Если я сохраню шаблон в качестве верхнего слоя, пользователь не сможет перетаскивать и корректировать его, поскольку холст заполнен шаблоном.
• Если я сохраню загруженное изображение в качестве верхнего слоя, изображение будет переполнено кружком.

Как я могу решить эту проблему, предоставив моему пользователю простой в использовании интерфейс? Я попытался использовать функцию ClipTo в fabric.js, но она не работает с объектом Object.

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

Вы можете нарисовать фото и шаблон на холсте. Я не уверен насчет fabric.js, но если бы вы вызывали функции canvas напрямую, вы бы просто ...

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

Когда пользователь перетаскивает мышью обновление x и y и перерисовывает оба слоя. Очевидно, убедитесь, что отверстие в шаблоне прозрачно. Вы можете добавить ширину и высоту к вызову DrawImage, если хотите, чтобы пользователь мог изменять размер изображения, просто предоставьте некоторый элемент управления для их изменения.

Answer 3

Более сложным способом является создание временного (закадрового) холста. Используя globalCompositeOperation=source-in, нарисуйте изображение поверх маски, затем getImageData оттуда и putImageData на целевом холсте.

Но если ответ Чарльза работает для вас, это гораздо проще.