利用compressorjs压缩、纠正方向、上传图片的案例。

﹏ヽ暗。殇╰゛Y 2021-11-16 19:24 1403阅读 0赞

## 背景 ##

最近要用到头像压缩和调整方向，对比了很多插件，最终选择了这款。这里分享如何使用。  
[https://mp.csdn.net/mdeditor/97372181\#][https_mp.csdn.net_mdeditor_97372181]

## git hub地址 ##

[https://github.com/fengyuanchen/compressorjs/blob/master/README.md\#options][https_github.com_fengyuanchen_compressorjs_blob_master_README.md_options]  
[效果演示][Link 1]

## 学习建议 ##

理解图片压缩，预览，上传的基本过程，对使用插件很有帮助。

## demo ##

.fileInput{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        display: block;
        width: 3.5rem;
        height: 3.5rem;
        clear: both;
        display: block;
        margin: auto;
        background-color: red;
    }
      <div class="aui-info">
            <img src="imgs/txbk.png" id="img-txz" style="width: 3rem;height: 3rem" class="aui-img-round user-img"/>
            <input type="file" accept="image/*" id="file-txz" name="file" onchange="upload('#file-txz', '#img-txz');"  class="fileInput"  value="" />
        </div>

javascript  
点击上传按钮时，触发upload，这个每家写法都不一样。我这里也不是最好的。

过程

1.  点击file按钮获取到上传的blog文件数组。如果是null,就结束。
2.  new Compressor 传入file的对象，指定参数，获得压缩后的file对象，这里是result。

自定义操作：  
1，readAsDataURL，把压缩后的文件对象抓换为base64,$d.setAttribute(“src”, e.target.result);设置img对象的src地址，实现了预览功能。  
2， blog=result; 这里我把压缩后的file传递给了blog变量，这个变量随后被我append到formdata中，用来上传文件。

## 参数详解 ##

有些参数是默认的，所以我没设定。但很重要。  
\- strict: true, 严格的语法模式  
\- checkOrientation: true, 检查图片的方向  
\- quality: 0.8, 默认压缩质量  
\- maxWidth:300, maxHeight:300, 我觉得头像没必要超过300px  
\- convertSize: 5000000, png图片如果超过了这个数值，被转换成JPEGs。

最常用的就是上面几个，其他大家可以自己研究一下。

[https_mp.csdn.net_mdeditor_97372181]: https://mp.csdn.net/mdeditor/97372181#
[https_github.com_fengyuanchen_compressorjs_blob_master_README.md_options]: https://github.com/fengyuanchen/compressorjs/blob/master/README.md#options
[Link 1]: https://fengyuanchen.github.io/compressorjs