js cómo duplicar y voltear imágenes

En JavaScript, las imágenes se pueden reflejar y voltear siguiendo los siguientes pasos:

1. Cree un canvaselemento y obtenga canvasel contexto del . El contexto se puede getContext('2d')obtener utilizando el método.

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

2. Cree un Imageobjeto y cargue la imagen que se volteará en este objeto.

var image = new Image();
image.src = 'path_to_image';

3. Después de esperar a que se cargue la imagen, dibuje la imagen en canvasel archivo .

image.onload = function() {
    
    
  ctx.translate(canvas.width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
};

4. canvas.toDataURL()Finalmente, la imagen volteada se puede convertir en una cadena codificada en base64 usando el método.

var flippedDataUrl = canvas.toDataURL();

El código de ejemplo completo es el siguiente:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var image = new Image();
image.src = 'path_to_image';

image.onload = function() {
    
    
  ctx.translate(canvas.width, 0);
  ctx.scale(-1, 1);
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

  var flippedDataUrl = canvas.toDataURL();
  console.log(flippedDataUrl);
};

El código anterior realiza un volteo de espejo horizontal en la imagen. Si se requiere voltear el espejo vertical, puede ctx.scale(-1, 1)cambiar a ctx.scale(1, -1).