79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
import { PixelCrop } from "react-image-crop";
|
|
|
|
export function getRotatedImageBlob(image: HTMLImageElement) {
|
|
return new Promise<Blob>((resolve, reject) => {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return reject(new Error("No 2d context"));
|
|
|
|
canvas.width = image.naturalHeight;
|
|
canvas.height = image.naturalWidth;
|
|
|
|
ctx.translate(canvas.width / 2, canvas.height / 2);
|
|
ctx.rotate(Math.PI / 2);
|
|
ctx.drawImage(image, -canvas.height / 2, -canvas.width / 2);
|
|
|
|
canvas.toBlob((blob) => {
|
|
if (!blob) return reject(new Error("Failed to create blob"));
|
|
|
|
resolve(blob);
|
|
});
|
|
});
|
|
}
|
|
|
|
export function getModifiedImageBlob(
|
|
image: HTMLImageElement,
|
|
crop: PixelCrop,
|
|
darken: number,
|
|
) {
|
|
return new Promise<Blob>((resolve, reject) => {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
if (!ctx) return reject(new Error("No 2d context"));
|
|
|
|
const scale = 1;
|
|
const scaleX = image.naturalWidth / image.width;
|
|
const scaleY = image.naturalHeight / image.height;
|
|
const pixelRatio = window.devicePixelRatio;
|
|
|
|
canvas.width = Math.floor(crop.width * scaleX * pixelRatio);
|
|
canvas.height = Math.floor(crop.height * scaleY * pixelRatio);
|
|
|
|
ctx.scale(pixelRatio, pixelRatio);
|
|
ctx.imageSmoothingQuality = "high";
|
|
|
|
const cropX = crop.x * scaleX;
|
|
const cropY = crop.y * scaleY;
|
|
|
|
const centerX = image.naturalWidth / 2;
|
|
const centerY = image.naturalHeight / 2;
|
|
|
|
ctx.translate(-cropX, -cropY);
|
|
ctx.translate(centerX, centerY);
|
|
ctx.scale(scale, scale);
|
|
ctx.translate(-centerX, -centerY);
|
|
ctx.drawImage(
|
|
image,
|
|
0,
|
|
0,
|
|
image.naturalWidth,
|
|
image.naturalHeight,
|
|
0,
|
|
0,
|
|
image.naturalWidth,
|
|
image.naturalHeight,
|
|
);
|
|
|
|
if (darken > 0) {
|
|
ctx.fillStyle = `rgba(0, 0, 0, ${darken / 100})`;
|
|
ctx.fillRect(0, 0, image.naturalWidth, image.naturalHeight);
|
|
}
|
|
|
|
canvas.toBlob((blob) => {
|
|
if (!blob) return reject(new Error("Failed to create blob"));
|
|
|
|
resolve(blob);
|
|
});
|
|
});
|
|
}
|