Question

我需要通过画布旋转图像并通过cropper.js库我可以旋转图像但保存图像并使用画布调节它并不能保存旋转格式。

在我的代码中，我所拥有的是一个让我向90度或-90度旋转的事件。然后在保存图像时，我需要以该格式保存。我需要在图像的轴上旋转，以便在使用旋转画布保存图像时，它将以正确的位置保存。我已经看到了一些方法，但它对我没有用，我不知道我输了。

Answer 1

如果您使用的是cropper.js。您可以使用内置方法getCroppedCanvas来编辑和裁剪新的画布。没有麻烦自己写。

var canvas = $ ('# target').cropper ('getCroppedCanvas');
console.log (canvas)
var dataURL = canvas.toDataURL ("image / jpeg");

Answer 2

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

// assuming that image is a loaded image.
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);

将-90Deg旋转到新画布上

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

原点是图像的左上角最终在旋转之后。

使用画布旋转图像

2 个答案: