原生JS，前端压缩图片方案

Posted 2020-10-25

        在移动互联网高速发展的今天，有太多太多的应用需要用户在移动Web上传图片文件。然而在上传图片前就对图片进行了压缩处理，从而提高图片的上传效率，减少用户的流量浪费，后台处理和用户体验也会得到提升。

为什么要这样做

        遇到的问题：

        1：在低网速下上传图片进度缓慢，用户体验差

        2：后台处理较大的文件压力大。

        3：业务需求要求文件大小、、等等（或许还有更多）

        在处理以上问题之前，需要给自己一些疑问

        1：图片是否有必要保存原图

        2：主要使用场景在移动端还是在PC端（图片处理消耗的性能和速度需要考虑）

        3：需要上传的图片一般大小大致在什么范围（处理图片的性能消耗时长）

ImgB64.js用法

    1、创建ImgB64，初始化压缩图片的参数：如下

        var img=new ImgB64({
            size:1024,//需要压缩图片的最小值。不填默认压缩所有,此处单位是Kb
            quality:20//图片自定义压缩质量，不填默认50（最大值是100）
        })
    2：引用，因为读取文件，img加载读取原始高宽，引用了异步的onload，此处传入方法执行处理后的图片base64。
        img.setOption({
            files:ele.files[0],
            showImg:function(imgBase64){

            },
        callback:function(imgBase64){
            console.log(imgBase64);
        }
    })
    
    Git:ImgB64
    《后续持续完善……》