No estoy preguntando cómo volver a dibujar la imagen volteada, que es lo que arrojan todos los resultados de búsqueda. De hecho, quiero rotar los DATOS del lienzo 180 grados. Copio el lienzo en el portapapeles usando canvas.toBlob , por lo que necesito transformar la mancha real del lienzo, no solo volver a dibujar como muestran la mayoría de los tutoriales.
Estoy creando un visor de fax interno que copia las páginas de fax de un archivo TIFF al portapapeles para que puedan pegarse en el lugar correcto en un programa diferente, pero a veces los faxes llegan al revés. Utilizo tiff.js para poder navegar a través de las imágenes tiff, cada página tiene su propio lienzo y luego uso canvas.toBlob para ponerlo en el portapapeles, pero si giro el lienzo en la pantalla, no permanece girado. cuando el blob se coloca en el portapapeles.
Como sugirió @Kaiido, debe volver a dibujar el lienzo. Sin embargo, eso no significa que deba rehacer todas las operaciones de dibujo que haya realizado, si eso es lo que le asusta.
En su lugar, puede crear dinámicamente un lienzo fuera de pantalla del tamaño de su lienzo principal, traducirlo y rotarlo en consecuencia, dibujar su lienzo principal y finalmente dibujar el lienzo fuera de pantalla de vuelta al lienzo principal, o simplemente usar el lienzo fuera de pantalla para su propósito y llamar al método toBlob() en él.
Por ejemplo:
let image = new Image(); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); image.crossOrigin = 'anonymous'; image.onload = () => { context.drawImage(image, 0, 0, canvas.width, canvas.height); context.font = '50px serif'; context.fillStyle = 'red'; context.fillText('rotated', 80, canvas.height / 2); let tempCanvas = document.createElement('canvas'); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; let ctx = tempCanvas.getContext('2d'); ctx.translate(canvas.width, canvas.height) ctx.rotate(180 * Math.PI / 180); ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height); context.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height); } image.src = 'https://api.codetabs.com/v1/proxy?quest=https://picsum.photos/id/237/300/200'; <canvas id="canvas" width="300" height="200"></canvas>