vue图片压缩不失真2025

本文详细介绍了如何在Vue项目中实现图片压缩，编写compressAndConvertToWebP方法，通过这些步骤，可以确保在压缩图片时保持图像质量，适用于移动端和Android设备。

/**
 * 
 * 压缩并转换图像文件为WebP格式
 * @param {string} blobUrl - Blob URL格式的图像文件
 * @returns {Promise<string>} - 返回一个Promise，解析为新的Blob URL格式的WebP图像
 */
export function compressAndConvertToWebP(blobUrl) {
    return new Promise((resolve, reject) => {
        // 创建一个新的Image对象
        let img = new Image();
        img.src = blobUrl;

        // 当图像加载完成后执行
        img.onload = () => {
            // 创建一个canvas元素
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;

            // 获取canvas的2D上下文
            let ctx = canvas.getContext('2d');
            // 将图像绘制到canvas上
            ctx.drawImage(img, 0, 0);

            // 设置输出格式为WebP，并指定压缩质量（例如：0.7）
            canvas.toBlob(blob => {
                if (blob) {
                    // 使用URL.createObjectURL创建Blob URL
                    let newBlobUrl = URL.createObjectURL(blob);
                    resolve(newBlobUrl);
                } else {
                    reject(new Error("Failed to convert image to WebP format"));
                }
            }, 'image/webp', 0.7);
        };

        // 如果图像加载失败
        img.onerror = () => {
            reject(new Error("Failed to load image from Blob URL"));
        };
    });
}