调整图像大小并将画布旋转90度 [英] Resize image and rotate canvas 90 degrees

问题描述

这里有很多关于在js上使用画布旋转图像的主题。我阅读了其中的大多数内容，无法解决问题。

There's quite a few topics here about rotating images with canvas on js. I read most of them, and couldn't figure out a solution for my problem.

我正在从上传组件接收到具有任何分辨率的图像。我将其调整为1024x768，例如：

I'm receiving an image (from an upload component) of whatever resolution. I'm resizing it to 1024x768 like:

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

if (img.width >= img.height) {
    canvas.width = 1024;
    canvas.height = 768;
} else {
    canvas.width = 768;
    canvas.height = 1024;
}
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);   

工作正常。

但是在Safari / iOs，当我拍照并上传时，图片的宽度值总是比高度高，因此上面的代码不起作用。

But on Safari/iOs, when I take a picture and upload, the image has ALWAYS a higher width value than height, so the code above doesn't work.

所以我决定使用exif-js来检测图像的方向。当Orientation属性高于4时，我需要将图像旋转90度，并交换高度和宽度值。

So I decided to use exif-js to detect the image's orientation. When the Orientation attribute is higher than 4, I need to rotate the image 90 degrees, and swap height and width values.

我试图像这样旋转图像：

I tried to rotate the image like this:

canvas.width = 768; // swapping values
canvas.height = 1024;                                       

ctx.translate(canvas.width/2, canvas.height/2);  // translate to center
ctx.rotate(Math.PI/2); // rotate 90 degrees

ctx.drawImage(img, -img.width/2,-img.height/2); // not sure of the dx and dy values here... 

图像已旋转。但是它只占用了原始图像的一小部分，因此显示在画布上，因此感觉放大了。似乎我在drawImage方法上使用了错误的值，但不确定如何解决。

The image is rotated. But it has taken just a small portion of the original image to display on the canvas, so it feels "zoomed in"... it seems that I'm using the wrong values on the drawImage method, but not sure how to fix.

如何用固定的高度和宽度值修复此旋转？

How can I fix this rotation with fixed height and width values?

推荐答案

在新画布上顺时针旋转90度。

To rotate 90 deg clockwise on a new canvas.

const canvas = document.createElement("canvas");
canvas.width = image.height;
canvas.height = image.width;
const ctx = canvas.getContext("2d");
ctx.setTransform(
     0,1, // x axis down the screen
    -1,0, // y axis across the screen from right to left
    image.height, // x origin is on the right side of the canvas 
    0             // y origin is at the top
);
ctx.drawImage(image,0,0);
ctx.setTransform(1,0,0,1,0,0); // restore default

如果需要缩放图像以适合尺寸（假设图像将旋转）

If you need to scale the image to fit a size (assuming image will be rotated)

const width = 1024; // after rotation
const height = 768; // after rotation
const scale = width / image.height; // how much to scale the image to fit
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const  ctx = canvas.getContext("2d");
ctx.setTransform(
     0,scale, // x axis down the screen
    -scale,0, // y axis across the screen from right to left
    width,    // x origin is on the right side of the canvas 
    0         // y origin is at the top
);
ctx.drawImage(image,0,0);
ctx.setTransform(1,0,0,1,0,0); // restore default

这篇关于调整图像大小并将画布旋转90度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！