Dibuja la imagen dentro de una forma con tela

Question

Actualmente estoy trabajando en la manipulación de imágenes en Canvas y JavaScript. Estoy usando Fabric.js para ello. Solo quiero que el usuario cargue una imagen y la fusione con la plantilla proporcionada por nosotros. es decir.,

Quiero mostrar la imagen cargada solo en el círculo vacío en el centro y pueden ajustarse arrastrándola.

• Si mantengo la plantilla como capa superior, el usuario no puede arrastrar y ajustar ya que el lienzo está lleno de plantilla.
• Si mantengo una imagen cargada como la capa superior, la imagen desborde el círculo.

¿Cómo puedo resolver esto dando a mi usuario una interfaz fácil de usar? Lo intenté para Clipto Funcionar en Fabric.js pero no funciona con el objeto de imagen.

Answer 1

pienso sobrecarga es lo que buscas.

Echa un vistazo a demostración de personalización por ejemplo:

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

Podrías dibujar tanto la foto como la plantilla en el lienzo. No estoy seguro de Fabric.js, pero si llamas a las funciones de lienzo directamente, simplemente ...

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

Cuando el usuario arrastra la actualización del mouse X e Y y vuelve a dibujar ambas capas. Obviamente, asegúrese de que el agujero en la plantilla sea transparente. Puede agregar ancho y altura a la llamada DrawImage si desea que el usuario pueda cambiar el tamaño de la imagen, solo proporcione algún tipo de control del cambio.

Answer 3

El método más difícil es crear un lienzo temporal (fuera de pantalla). Usando globalCompositeOperation=source-in, dibuja la imagen sobre una imagen de máscara, luego getImageData a partir de ahí y putImageData en su lienzo de destino.

Pero si Respuesta de Charles Funciona para ti, es mucho más sencillo.