前端实战分享，图片处理神器全面解析（base64、大小判断、压缩、上传）

在前端开发中，处理用户上传的图片是家常便饭。但是，如果你希望提升用户体验、减轻服务器压力，并在项目中真正发挥JavaScript的潜力，那么就让我们一起探讨一下图片转base64、判断图片大小、图片压缩和图片上传的黑科技吧！

这个方法经过实际项目验证，绝对可行，不仅适用于原生JavaScript，也可在React、Vue、Angular等框架中借鉴应用。

逻辑步骤

第1步：让FileReader发挥魔力

我们首先调用 FileReader 的 readAsDataURL 方法，将用户选择的图片读入 Image 对象。FileReader详见对于JavaScript 的 FileReader，你了解多少？

const reader = new FileReader();
reader.onload = function(ev) {
    const result = ev.target.result;
    // 接下来的处理逻辑将在这里进行
};
reader.readAsDataURL(file);

第2步：巧妙使用Canvas进行图片压缩

在 Image 对象的 onload 事件中，通过 canvas 的 getContext('2d') 的 drawImage 方法，将图片按照设定大小绘制到 canvas 上。

const img = new Image();
img.src = result;
img.onload = function(e) {
    // 判断图片大小，如果超过5M，则进行压缩处理
    if (file.size > 1024 * 5000) {
        // 计算缩放比例，使宽度和高度不超过300
        let scale = 1;
        if (img.width > 300 || img.height > 300) {
            scale = Math.min(300 / img.width, 300 / img.height);
        }
        // 生成canvas
        const canvas = document.createElement("canvas");
        const drawer = canvas.getContext("2d");
        // 缩放图像
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        // 使用toDataURL生成压缩后的图片base64
        result = canvas.toDataURL(file.type);
    }
};

第3步：处理图片展示和上传

最后，我们可以在相应的回调函数中处理展示和上传逻辑。

function img_show(img_base64) {
    // 处理页面展示图片的逻辑
}

function img_upload(image_base64) {
    // 处理图片上传的逻辑，可以调用接口进行上传
}

执行代码

HTML部分：

<input id="sendImage" title="this is imgUpload" type="file" accept="image/*" onchange="imgChange(this)" />

<img id="img_show" src="">

JavaScript部分：

function imgChange(e) {
    if (e.files.length != 0) {
        const file = e.files[0];
        const reader = new FileReader();
        if (!reader) {
            e.value = '';
            return;
        }

        reader.onload = function(ev) {
            const result = ev.target.result;
            const data = img_compress(file, result);
            img_show(data);
            img_upload(data);
        };

        reader.readAsDataURL(file);
    }
}

function img_compress(file, result) {
    // 省略了图片压缩的具体实现，详见上述第2步的代码
    // 注意：这里返回的是处理后的图片base64字符串
    return result;
}

function img_show(img_base64) {
    // 处理页面展示图片的逻辑，这里简单地将图片展示在id为img_show的<img>标签中
    if (img_base64 !== 'data:,') {
        document.getElementById("img_show").src = img_base64;
    }
}

function img_upload(image_base64) {
    // 处理图片上传的逻辑，可以调用接口进行上传
    // 示例中省略了实际上传的代码
}

真实可用，复制这个，你可以在前端轻松实现图片的压缩和上传，提高用户体验。将这个方法应用封装到你的项目中，开发更高效！希望本文对你有所帮助，建议收藏起来，有兴趣的伙伴评论区一起讨论下~