How to resize and rotate image simulataneously using canvas - html

Question

I have to resize and rotate a image before upload, resize is to make the picture smaller, and rotate is to correct the image captured by iPhone.
Here is the code i am using, for resize, i am using a smaller canvas to redraw the image, for rotation, i am using canvas to do it.
the problem is that, my image only show a portion of the source image. how to show the full image?
This is the source image
This is what i got with the code: you can see the rotation was correct, but the resize is not, it clips the source image and left only part of it.
this is what i want.
const img = new Image();
img.src = 'https://i.stack.imgur.com/rzJQD.jpg';
img.onload = e => resize_and_rotate(img, 6);
function resize_and_rotate(img, orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
// limit the image to at most 600px width or 900px height.
let ratio = img.height / img.width;
if (img.width > 600) {
canvas.width = 600;
canvas.height = canvas.width * ratio;
} else if (img.height > 900) {
canvas.height = 900;
canvas.width = canvas.height / ratio;
}
let width = canvas.width;
let height = canvas.height;
/*
For iPhone, landscape mode(with home key point to right) is the correct mode, it orientation is 1
for portrait mode(home key point to bottom), the image will rotate right by 90 degree.
*/
if (orientation === 6) { // rotate 90 degree.
// swap canvas width and height.
canvas.width = height;
canvas.height = width;
// move to the center of the canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
// rotate the canvas to the specified degrees
ctx.rotate(0.5 * Math.PI);
// since the context is rotated, the image will be rotated also
ctx.drawImage(img, -img.width / 2, -img.height / 2);
} else if (orientation === 3) { // rotate 180 degree.
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
} else if (orientation === 8) { // rotate 90 degree, counter-clockwise.
canvas.width = height;
canvas.height = width;
// move to the center of the canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
// rotate the canvas to the specified degrees
ctx.rotate(-0.5 * Math.PI);
// since the context is rotated, the image will be rotated also
ctx.drawImage(img, -img.width / 2, -img.height / 2);
} else {
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
// return base64 data.
// let base64 = canvas.toDataURL("image/jpeg");
// return base64;
// for SO
document.body.append(canvas);
}
canvas{max-height: 100vh; max-width: 100vw}
If i remove the following piece of code, the result was right, but it does not resize my image. seems like something wrong with the canvas size? please help.
// limit the image to at most 600px width or 900px height.
let ratio = img.height / img.width;
if (img.width > 600) {
canvas.width = 600;
canvas.height = canvas.width * ratio;
} else if (img.height > 900) {
canvas.height = 900;
canvas.width = canvas.height / ratio;
}

Answer 1

Your problem lies in drawImage.
You are not using enough arguments and your are not using the correct values there.
After you have done your transformations (translate(center); rotate()), you correctly try to inverse the translation so that the image be painted from the top-left corner as it should. However, you are using the original size of your image as x,y parameters instead of the destination ones.
Also, by using the 3 params version, you let destinationWidth and destinationHeight be the original size of your image, while you need the width and height of your canvas:
ctx.drawImage(img, -width / 2, -height / 2, width, height);
const img = new Image();
img.src = 'https://i.stack.imgur.com/rzJQD.jpg';
img.onload = e => resize_and_rotate(img, 6);
function resize_and_rotate(img, orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
// limit the image to at most 600px width or 900px height.
let ratio = img.height / img.width;
if (img.width > 600) {
canvas.width = 600;
canvas.height = canvas.width * ratio;
} else if (img.height > 900) {
canvas.height = 900;
canvas.width = canvas.height / ratio;
}
let width = canvas.width;
let height = canvas.height;
/*
For iPhone, landscape mode(with home key point to right) is the correct mode, it orientation is 1
for portrait mode(home key point to bottom), the image will rotate right by 90 degree.
*/
if (orientation === 6) { // rotate 90 degree.
// swap canvas width and height.
canvas.width = height;
canvas.height = width;
// move to the center of the canvas
ctx.translate(canvas.width / 2, canvas.height / 2);
// rotate the canvas to the specified degrees
ctx.rotate(0.5 * Math.PI);
// since the context is rotated, the image will be rotated also
ctx.drawImage(img, -width / 2, -height / 2, width, height);
} else if (orientation === 3) { // rotate 180 degree.
// 180° rotate left
ctx.translate(canvas.width, canvas.height);
ctx.rotate(Math.PI);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
} else if (orientation === 8) { // rotate 90 degree, counter-clockwise.
canvas.width = height;
canvas.height = width;
// move to the center of the canvas
ctx.translate(height / 2, width / 2);
// rotate the canvas to the specified degrees
ctx.rotate(-0.5 * Math.PI);
// since the context is rotated, the image will be rotated also
ctx.drawImage(img, -width / 2, -height / 2, width, height);
} else {
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, width, height);
}
// return base64 data.
// let base64 = canvas.toDataURL("image/jpeg");
// return base64;
// for SO
document.body.append(canvas);
}
canvas{max-height: 100vh; max-width: 100vw}