vue base64图片压缩

在Vue项目中，对base64编码的图片进行压缩通常是为了优化性能和减少资源的大小，从而加快页面的加载速度。可以通过JavaScript提供的API来实现这一功能，但需要注意的是，base64编码的字符串表示的是图片的原始数据，如果要压缩这种字符串形式的图片数据，实际上是需要先将其转换为图片对象，然后利用canvas进行压缩，最后再转换回base64字符串。

以下是使用JavaScript和canvas对base64图片进行压缩的基本步骤：

1. 将base64字符串转换为Blob对象。
2. 使用FileReader API读取Blob对象，得到二进制数据。
3. 创建一个Image对象，将二进制数据作为源。
4. 将图片绘制到canvas上，并在绘制过程中指定压缩后的尺寸。
5. 最后，使用canvas的toDataURL方法将canvas内容转换回base64字符串，此时得到的就是压缩后的图片数据。

示例代码如下：

function compressBase64Image(base64, quality = 0.7) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 设置目标尺寸
            canvas.width = img.width * quality;
            canvas.height = img.height * quality;
            // 绘制图片到canvas并压缩
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 将canvas转换为base64
            const compressedBase64 = canvas.toDataURL('image/jpeg', quality);
            resolve(compressedBase64);
        };
        img.onerror = function() {
            reject('图片加载失败');
        };
        img.src = base64;
    });
}

使用这个函数，你可以传入一个base64编码的图片字符串，并获取一个压缩后的图片字符串。