浏览器原生js实现图片裁切压缩格式转换

南遥云

已于 2024-05-01 11:54:59 修改

阅读量47

点赞数 3

文章标签：前端 javascript html 图像处理

于 2024-05-01 11:48:59 首次发布

本文链接：https://blog.csdn.net/qq_34775513/article/details/138369748

版权

文章介绍了如何使用JavaScript中的IMAGE_PROSESSOR对象，实现图片的压缩和格式转换，包括读取图片、缩放、绘制到canvas并转换为指定文件类型如PNG或JPEG。

摘要由CSDN通过智能技术生成

const IMAGE_PROSESSOR = {
    IMAGE_PNG: 'image/png',
    IMAGE_JPEG: 'image/jpeg',
    compressAndConvertTo(srcPath, fileName, fileTyp = IMAGE_PROSESSOR.IMAGE_PNG, dw = 200, dh = dw) {
        return new Promise((resolve, reject) => {
            try {
                const img = new Image(dw, dh);
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = dw;
                    canvas.height = dh;
                    let scale = Math.max(dw / img.naturalWidth, dh / img.naturalHeight);
                    let [width, height] = [canvas.width / scale, canvas.height / scale];
                    let [sx, sy] = [(img.naturalWidth - width) / 2, (img.naturalHeight - height) / 2];
                    ctx.drawImage(img, sx, sy, width, height, 0, 0, canvas.width, canvas.height);
                    resolve(IMAGE_PROSESSOR.canvasToFile(canvas, fileName, fileTyp));
                }
                img.src = srcPath;
            } catch (error) {
                reject(error);
            }
        });
    },
    canvasToFile(canvas, fileName, fileTyp) {
        return fetch(canvas.toDataURL(fileTyp))
            .then(response => response.blob())
            .then(blob => new File([blob], fileName, { type: fileTyp }));
    }
};