Ufdjrw

I have an image that I'm allowing users to rotate 90 degrees in any direction. Every time they rotate, I use canvas to perform the image manipulations and then save the data returned by the canvas.toDataURL("image/png", 1).

The problem is that the image quality decreases every time I rotate the image.

My end goal is to rotate a rectangular image without losing image quality and also saving the new data url.

function rotateAndSave(image: HTMLImageElement, degrees: number): string {
 const imageWidth = image.naturalWidth;
 const imageHeight = image.naturalHeight;
 const startedHorizontalEndedVertical = imageWidth > imageHeight;
 const canvasSize = startedHorizontalEndedVertical ? imageWidth : imageHeight;

 const canvas = document.createElement("canvas");
 canvas.width = canvasSize;
 canvas.height = canvasSize;

 const ctx = canvas.getContext("2d");
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 // center and rotate canvas
 const translateCanvas = canvasSize / 2;
 ctx.translate(translateCanvas, translateCanvas);
 ctx.rotate(degrees * Math.PI / 180);

 // draw from center
 const translateImageX = startedHorizontalEndedVertical ? -translateCanvas : (-imageWidth / 2);
 const translateImageY = startedHorizontalEndedVertical ? (-imageHeight / 2) : -translateCanvas;
 ctx.drawImage(image, translateImageX, translateImageY); 

 // I got 'cropPlusExport' from another stackoverflow question.
 function cropPlusExport(img, cropX, cropY, cropWidth, cropHeight) 
 // create a temporary canvas sized to the cropped size
 const canvas1 = document.createElement('canvas');
 canvas1.width = cropWidth;
 canvas1.height = cropHeight;
 const ctx1 = canvas1.getContext('2d');
 ctx1.setTransform(1, 0, 0, 1, 0, 0);
 ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
 // use the extended from of drawImage to draw the
 // cropped area to the temp canvas
 ctx1.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
 return canvas1.toDataURL("image/png", 1);
 

 // Start Cropping
 let squareImage = new Image();
 squareImage.src = canvas.toDataURL("image/png", 1);
 squareImage.onload = () => 
 const sx = startedHorizontalEndedVertical ? ((canvasSize - imageHeight) / 2) : 0;
 const sy = startedHorizontalEndedVertical ? 0 : ((canvasSize - imageWidth) / 2);
 const sw = imageHeight;
 const sh = imageWidth;
 const data = cropPlusExport(squareImage, sx, sy, sw, sh);

 // Update DOM via angular binding...
 const dataUrl = data.split(",")[1];
 this.imageSource = dataUrl;

 squareImage = null;
 

example html

<div class="view">
 <img [src]="imageSource" />
</div>

Keep in mind that I am cropping to the natural width and height of the image. So, what's weird is that if I don't crop, then the image quality doesn't change but when I do crop, the image quality changes.

Canvas drawing is lossy, and rotating an image induce hard modifications of the pixels. So indeed, if you start always from the last state, you'll end up adding more and more artifacts to your image.

Simply store the original image somewhere and always start from there instead of using the modified version.

// will fire in a loop
img.onload = e => elem.rotateAndSave(1);

const elem = 
 // store a copy of the original image
 originalimage: img.cloneNode(),
 angle: 0,
 rotateAndSave(degrees) 
 // always use the stored original image
 const image = this.originalimage;
 // keep track of current transform
 this.angle += degrees;
 const imageWidth = image.naturalWidth;
 const imageHeight = image.naturalHeight;
 const startedHorizontalEndedVertical = imageWidth > imageHeight;
 const canvasSize = startedHorizontalEndedVertical ? imageWidth : imageHeight;

 const canvas = document.createElement("canvas");
 canvas.width = canvasSize;
 canvas.height = canvasSize;

 const ctx = canvas.getContext("2d");
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 // center and rotate canvas
 const translateCanvas = canvasSize / 2;
 ctx.translate(translateCanvas, translateCanvas);
 ctx.rotate(this.angle * Math.PI / 180);

 // draw from center
 const translateImageX = startedHorizontalEndedVertical ? -translateCanvas : (-imageWidth / 2);
 const translateImageY = startedHorizontalEndedVertical ? (-imageHeight / 2) : -translateCanvas;
 ctx.drawImage(image, translateImageX, translateImageY);

 // I got 'cropPlusExport' from another stackoverflow question.
 function cropPlusExport(img, cropX, cropY, cropWidth, cropHeight) 
 // create a temporary canvas sized to the cropped size
 const canvas1 = document.createElement('canvas');
 canvas1.width = cropWidth;
 canvas1.height = cropHeight;
 const ctx1 = canvas1.getContext('2d');
 ctx1.setTransform(1, 0, 0, 1, 0, 0);
 ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
 // use the extended from of drawImage to draw the
 // cropped area to the temp canvas
 ctx1.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
 return canvas1.toDataURL("image/png", 1);
 

 // Start Cropping
 let squareImage = new Image();
 squareImage.src = canvas.toDataURL("image/png", 1);
 squareImage.onload = () => 
 const sx = startedHorizontalEndedVertical ? ((canvasSize - imageHeight) / 2) : 0;
 const sy = startedHorizontalEndedVertical ? 0 : ((canvasSize - imageWidth) / 2);
 const sw = imageHeight;
 const sh = imageWidth;
 const data = cropPlusExport(squareImage, sx, sy, sw, sh);

 // Update DOM via angular binding...
 img.src = data;
 
 
;

<img crossorigin src="https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg" id="img">