base64之js压缩图片

在Web开发中，图像文件传输占据了极大的带宽。为此，我们可以使用一些方法来减少图像传输的大小。其中，将图像压缩为base64编码字符串并将其添加到HTML或CSS文件中是一种常见的方法。在这篇文章中，我们将学习如何使用JavaScript对图像进行压缩，并将其转换为base64编码字符串以缩小文件的大小。

为什么要使用base64编码？

base64编码是一种将二进制数据转换为ASCII字符的编码方式。它可以将任何二进制文件编码成可读的ASCII字符，包括图像文件。将图像转换为base64字符串后，我们可以将其嵌入HTML或CSS中，减少对服务器的资源请求，从而加快网页响应的速度。

图像压缩

在开始转换图像之前，我们需要先将其压缩。在前端开发中，通常使用JavaScript来压缩图像。以下是一个使用canvas元素进行图像压缩的代码示例：

function compressImage(file, maxWidth, maxHeight, callback) {
    var img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        if (width > height) {
            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }
        } else {
            if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
            }
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        callback(canvas.toDataURL());
    };
}

以上代码中，compressImage函数接受一个文件对象、最大宽度和最大高度作为参数，并在完成压缩后调用回调函数。在函数内部，我们首先创建一个Image对象，将文件对象的URL赋值给它。然后在图像被加载后，我们创建一个canvas元素并获取它的上下文对象。按比例缩小图像大小，最终使用canvas的toDataURL方法将图像转换为base64编码字符串。

base64编码

在压缩图像后，我们可以使用以下代码将其转换为base64编码字符串：

var reader = new FileReader();
reader.onloadend = function() {
    var base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
};
reader.readAsDataURL(file);

以上代码中，我们使用FileReader对象读取文件对象，然后使用它的result属性将文件读取为base64编码字符串。

代码示例

最后，以下是一个完整的使用JavaScript压缩图像并将其转换为base64编码字符串的代码示例：

function compressImage(file, maxWidth, maxHeight, callback) {
    var img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        if (width > height) {
            if (width > maxWidth) {
                height *= maxWidth / width;
                width = maxWidth;
            }
        } else {
            if (height > maxHeight) {
                width *= maxHeight / height;
                height = maxHeight;
            }
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        callback(canvas.toDataURL());
    };
}

function compressAndEncodeImage(file, maxWidth, maxHeight, callback) {
    var reader = new FileReader();
    reader.onloadend = function() {
        var base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
        compressImage(file, maxWidth, maxHeight, function(compressedDataUrl) {
            callback(compressedDataUrl);
        });
    };
    reader.readAsDataURL(file);
}

以上代码中，我们定义了两个函数：compressImage和compressAndEncodeImage。compressImage函数的作用是压缩图像并将其转换为data URL，而compressAndEncodeImage函数则负责将data URL编码为base64编码字符串。我们通过调用compressAndEncodeImage函数将图像文件传递给它，并指定最大宽度和最大高度。最终结果是一个base64编码字符串，可以使用它替换原始的图像文件。

结论

使用JavaScript压缩图像是一种减小文件大小的有效方法。当你需要向服务器发送多个图像文件时，使用base64编码字符串代替原始的图像文件可以大大减少响应时间和带宽使用量。