如何使用react-image-crop裁剪和缩放图像

Question

我希望能够像react-easy-crop一样缩放和裁剪图像，但是使用react-image-crop

到目前为止，它切断了我，但当我使用ReactCrop的scale = prop缩放

在剪辑

时不考虑这个我需要放大照片并使用画布进行裁剪这是我的画布代码用于裁剪照片

const canvas = document.createElement('canvas')
const scaleX: number = image.naturalWidth / image.width
const scaleY: number = image.naturalHeight / image.height
canvas.width = crop.width
canvas.height = crop.height
const ctx = canvas.getContext('2d')
// New lines to be added
const pixelRatio = window.devicePixelRatio
canvas.width = crop.width * pixelRatio
canvas.height = crop.height * pixelRatio
if (ctx !== null) {
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
ctx.imageSmoothingQuality = 'high'
ctx.drawImage(
image,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
0,
0,
crop.width,
crop.height
)
}
// As Base64 string
// const base64Image = canvas.toDataURL("image/jpeg");
// return base64Image;
// As a blob
return new Promise((resolve, reject) => {
canvas.toBlob(
(blob: any) => {
if (blob) {
blob.name = fileName
const newImg = URL.createObjectURL(blob)
resolve(newImg)
}
return
},
'image/png',
1
)
})

Answer 1

passign尺度和旋转参数你要精确裁剪图像。

function getCroppedImg(
image: HTMLImageElement, // useRef reference
crop: PixelCrop,
scale = 1,
rotate = 0
) {
const canvas = document.createElement('canvas');
canvas.width = crop.width;
canvas.height = crop.height;
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error('No 2d context');
}
const scaleX = image.naturalWidth / image.width;
const scaleY = image.naturalHeight / image.height;
// devicePixelRatio slightly increases sharpness on retina devices
// at the expense of slightly slower render times and needing to
// size the image back down if you want to download/upload and be
// true to the images natural size.
const pixelRatio = window.devicePixelRatio;
// const pixelRatio = 1
canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
ctx.scale(pixelRatio, pixelRatio); // this line will handle the scale or zoom image
ctx.imageSmoothingQuality = 'high';
const cropX = crop.x * scaleX;
const cropY = crop.y * scaleY;
const rotateRads = rotate * TO_RADIANS; // this line will handle the rotation of image
const centerX = image.naturalWidth / 2;
const centerY = image.naturalHeight / 2;
ctx.save();
// 5) Move the crop origin to the canvas origin (0,0)
ctx.translate(-cropX, -cropY);
// 4) Move the origin to the center of the original position
ctx.translate(centerX, centerY);
// 3) Rotate around the origin
ctx.rotate(rotateRads);
// 2) Scale the image
ctx.scale(scale, scale);
// 1) Move the center of the image to the origin (0,0)
ctx.translate(-centerX, -centerY);
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, image.naturalWidth, image.naturalHeight);
ctx.drawImage(
image,
0,
0,
image.naturalWidth,
image.naturalHeight,
0,
0,
image.naturalWidth,
image.naturalHeight
);
ctx.restore();
return new Promise<{
render: string;
file: Blob | null;
}>((resolve) => {
canvas.toBlob((file) => {
if (file != null) {
const files: Blob | MediaSource = file;
resolve({
render: URL.createObjectURL(files),
file: file,
});
}
}, 'image/jpeg');
});
}

另外，这里我附上了react-image-crop的官方演示。https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o