62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
const createImage = (url) =>
|
|
new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
image.addEventListener("load", () => resolve(image));
|
|
image.addEventListener("error", (error) => reject(error));
|
|
image.setAttribute("crossOrigin", "anonymous");
|
|
image.src = url;
|
|
});
|
|
|
|
async function getCroppedImg(imageSrc, pixelCrop) {
|
|
const image = await createImage(imageSrc);
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
const maxSize = Math.max(image.width, image.height);
|
|
const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
|
|
|
|
canvas.width = safeArea;
|
|
canvas.height = safeArea;
|
|
|
|
ctx.drawImage(
|
|
image,
|
|
safeArea / 2 - image.width * 0.5,
|
|
safeArea / 2 - image.height * 0.5
|
|
);
|
|
const data = ctx.getImageData(0, 0, safeArea, safeArea);
|
|
|
|
canvas.width = pixelCrop.width;
|
|
canvas.height = pixelCrop.height;
|
|
|
|
ctx.putImageData(
|
|
data,
|
|
Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
|
|
Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
|
|
);
|
|
|
|
return canvas.toDataURL("image/jpeg");
|
|
}
|
|
|
|
export const dataURLtoFile = (dataurl, filename) => {
|
|
const arr = dataurl.split(",");
|
|
const mime = arr[0].match(/:(.*?);/)[1];
|
|
const bstr = atob(arr[1]);
|
|
let n = bstr.length;
|
|
const u8arr = new Uint8Array(n);
|
|
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
|
|
return new File([u8arr], filename, { type: mime });
|
|
};
|
|
|
|
export const cropImage = async (image, croppedAreaPixels, onError) => {
|
|
try {
|
|
const croppedImage = await getCroppedImg(image, croppedAreaPixels);
|
|
return croppedImage;
|
|
} catch (err) {
|
|
onError(err);
|
|
}
|
|
};
|