前端js压缩图片并上传

peixn 发布于2019-08-21 17:39 / 943人阅读

公司最近有需要压缩上传图片功能，查找了些资料并实现了一把。

主要用到的原生组件：FileReader、Canvas、Blob、FormData

逻辑步骤：

FileReader.readAsDataURL将上传的图片文件转为Base64格式

将img绘制到canvas上，canvas.toDataURL压缩图片

new Blob将压缩后的Base64转为Blob格式

FormData.append将图片文件数据存入formdata

Code:

this.compressImage(files[0], (file)=>{
    console.log(file);
    const formData = new FormData();
    formData.append("file", file, file.name || "上传图片.jpeg");
}, $.noop);
//压缩图片
compressImage = (file, success, error) => {
    // 图片小于1M不压缩
    if (file.size < Math.pow(1024, 2)) {
        return success(file);
    }

    const name = file.name; //文件名
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
        const src = e.target.result;
        
        const img = new Image();
        img.src = src;
        img.onload = (e) => {
            const w = img.width;
            const h = img.height;
            const quality = 0.8;  // 默认图片质量为0.92
            //生成canvas
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            // 创建属性节点
            const anw = document.createAttribute("width");
            anw.nodeValue = w;
            const anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);

            //铺底色 PNG转JPEG时透明区域会变黑色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, w, h);

            ctx.drawImage(img, 0, 0, w, h);
            // quality值越小，所绘制出的图像越模糊
            const base64 = canvas.toDataURL("image/jpeg", quality); //图片格式jpeg或webp可以选0-1质量区间

            // 返回base64转blob的值
            console.log(`原图${(src.length/1024).toFixed(2)}kb`, `新图${(base64.length/1024).toFixed(2)}kb`);
            //去掉url的头，并转换为byte
            const bytes = window.atob(base64.split(",")[1]);
            //处理异常,将ascii码小于0的转换为大于0
            const ab = new ArrayBuffer(bytes.length);
            const ia = new Uint8Array(ab);
            for (let i = 0; i < bytes.length; i++) {
                ia[i] = bytes.charCodeAt(i);
            }
            file = new Blob( [ab] , {type : "image/jpeg"});
            file.name = name;

            success(file);
        }
        img.onerror = (e) => {
            error(e);
        }
    }
    reader.onerror = (e) => {
        error(e);
    }
}

遇到的一些坑：

PNG转JPEG时PNG格式的透明区域会变黑色，需要先手动铺底色

toDataURL参数为PNG时不支持传图片质量，所以需要写死image/jpeg或image/webp，具体可以参考toDataURL的api

formData.append第三个参数filename是有浏览器兼容性问题的，如果不传就是filename=blob，后端校验文件名可能过不去

ajax的contentType和processData需要传false，这和本文关系不大直接带过

网上说的ios中canvas绘制图片大小限制我在iphone6上测试没遇到，可能和机型或系统有关系，如果有可以在下面留言

结语，压缩功能比较适合移动端，毕竟PC端带宽比较好而且不能兼容IE老版本。

专线服务私有云 js图片压缩上传 js压缩图片上传 js上传图片压缩插件 php保存图片并压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89827.html

结合Vue.js的前端压缩图片方案

摘要：图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。这是一个很简单的方案。嗯，是真的。为什么要这么做？在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克：低网速下上传进度缓慢，用户体验差高并发下，后台处理较大的上传文件压力大或许有更多... 在攻克上面的一些...

Awbeci 2019-08-05 10:18 评论0 收藏0
结合Vue.js的前端压缩图片方案

摘要：图片文件大小减小后，上传速度自然会提升，在同样的并发下，后台处理的速度也会得到提升，用户体验得到提升。这是一个很简单的方案。嗯，是真的。为什么要这么做？在移动Web蓬勃发展的今天，有太多太多的应用需要让用户在移动Web上传图片文件了，正因如此，我们有些困难必须去攻克：低网速下上传进度缓慢，用户体验差高并发下，后台处理较大的上传文件压力大或许有更多... 在攻克上面的一些...

sutaking 2019-08-20 11:59 评论0 收藏0
input上传图片并压缩（vue，前端，js）

摘要：大家好，我是云皓，话不多说，直入正题，获取上传文件自行获取，也可通过的组件来获取，转化为文件，压缩，转换为文件，上传。大家好，我是云皓，话不多说，直入正题 1，获取input上传file文件（自行获取，也可通过vant的upload组件来获取）2，转化为base64文件3，压缩4，转换为blob文件5，上传。下面直接上代码（本代码段是用用在vue&vantui 里面，原理都在，可根...

andot 2019-08-26 10:59 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Luosunce 2019-08-23 10:25 评论0 收藏0
前端文件上传(js/vue.js/axios/canvas图片压缩)

摘要：哈哈主要还是我嫌麻烦四上传图片这里的页面样式，图片压缩和预览都和上面一样，这里我主要配置一下的，让接口能够成功上传。如果想让用户有更好的体验，可以对图片进行一下压缩和本地预览。一、通过Form表单提交上传 HTML enctype属性必不可少上面一种方法通过表单自有属性进行提交，看似简单，但是也有其最大的缺点，那就是提交...

Lsnsh 2019-08-02 11:04 评论0 收藏0