Image dimension resize and rotate by 90 degree using canvas - html5-canvas

Question

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 0;
var height = 0;
var diagonal = 0;
var image = new Image();
image.crossOrigin = 'Anonymous';
image.src = `source url`;
image.onload = () => {
width = image.naturalHeight;
height = image.naturalWidth;
diagonal = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
ctx.canvas.height = diagonal;
ctx.canvas.width = diagonal;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((0 * Math.PI) / 180);
ctx.drawImage(image, -width / 2, -height / 2);
ctx.restore();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(diagonal / 2, diagonal / 2);
ctx.rotate((90 * Math.PI) / 180);
ctx.save();
canvas.height = image.height;
canvas.width = image.width;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
ctx.restore();
console.log(canvas.toDataURL("image/jpeg"))
};
<canvas id="canvas"></canvas>
I have an image of dimensions 1200x900. I want to rotate it by 90 degrees in clockwise and after rotation change its dimension again to 1200*900. How can I do this using canvas of HTML5.
I am attaching image here.
I want the destination image to be of size 1200x900. Please let me know, how to do this.

Answer 1

I don't see anywhere where you calculate the ratio between height & width...
We calculate that and use it in our drawImage to reduce the size.
...see sample below:
I keep the canvas size to the original image to show it in the background
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = image.naturalHeight;
canvas.width = image.naturalWidth;
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(Math.PI / 2);
let ratio = canvas.height/canvas.width
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2, canvas.width/ratio, canvas.width);
ctx.restore();
};
<canvas id="canvas"></canvas>
I was not sure what your diagonal calculation was needed for, so I just removed that and anything else not relevant... in future questions if you can explain your logic we can better respond to what/where your approach is going wrong
You can use same logic for other similar transformation...
here is another code sample:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = () => {
canvas.height = canvas.width = Math.max(image.naturalWidth, image.naturalHeight);
// original image
ctx.globalAlpha = 0.2;
ctx.drawImage(image, 0, 0);
ctx.rect(0, 0, image.naturalWidth, image.naturalHeight);
ctx.fill()
// rotated image
ctx.save();
ctx.globalAlpha = 1;
ctx.translate(image.naturalHeight / 2, image.naturalWidth / 2);
ctx.rotate(Math.PI / 2);
ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);
ctx.restore();
};
<canvas id="canvas"></canvas>