javascript 处理图片压缩、剪切、模糊和上传
最近在研究H5前端图片处理相关技术，方向有图片压缩、裁切、旋转、模糊等，现在已经整理成对应的demo，上传至github。
一：js脚本实现图片压缩 - CompressImageUtiles
特点：
1 体积小，4kb；
2 支持blob格式上传和base64格式上传
原图 5.4MB
压缩后136KB
用法：
1. // html 2. <input type="file" id="input-img"> 3. 4. //引入脚本 5. <script src="./CompressImageUtiles.js"></script> 6. 7. 8. <script> 9. /** 10. * 支持blob格式上传和base64格式上传 11. * */ 12. let inputDom = document.querySelector('#input-img') 13. inputDom.onchange = function(){ 14. const fileObj = inputDom.files[0]; 15. _compressAndUploadFile(fileObj); 16. } 17. function _compressAndUploadFile(file){ 18. compressImage(file).then(resultObj => { 19. let {canvas,blob,base64,fileName,oSize} = resultObj 20. if (blob.size > oSize){ 21. that._uploadFile(file, fileName); 22. } else { 23. //压缩后比原来小，上传压缩后的 24. _uploadFile(blob, fileName) 25. } 26. // 下载 27. downloadImgFromBlob(blob,fileName) 28. }) 29. } 30. //上传 31. function _uploadFile(file){ 32. let params = new FormData(); 33. params.append("file", file); 34. }
demo地址：https://github.com/zhangfeng001/compressUtls-demo
ssh:git@github.com:zhangfeng001/compressUtls-demo.git
二：jq插件 实现图片剪切、旋转 - imagecropper
特点：1、炫酷的展现效果，可以完美的应用到项目中，如头像上传前选择区域等
2、输出多种数据格式，直接浏览器打开HTML查看效果
效果预览：
用法介绍：
1、下载demo 在main.js中看到如下方法，
1. if (data.method === 'getCroppedCanvas') { 2. $('#getCroppedCanvasModal').modal().find('.modal-body').html(result.canvas); 3. console.log(result) 4. }
2、在此方法中可以查看log，拿到多种图片数据类型 有canvas 、base54、blob，选择一种上传即可
demo地址：https://github.com/zhangfeng001/cropper-demo
ssh：git@github.com:zhangfeng001/cropper-demo.git
三：CSS3和canvas实现图片模糊处理 blurify.js
特点：体积小，实现更方便，
效果展示
用法介绍：超级简单
1. <div class="blurify-container"> 2. <img src="./test/miao.jpg" class="img"> 3. <img data-src="./test/miao.jpg" class="blurify"> 4. <img src="./test/wang.jpg" class="img"> 5. <img data-src="./test/wang.jpg" class="blurify"> 6. </div> 7. <script src="dist/blurify.js"></script> 8. <script> 9. (function () { 10. blurify({ 11. images: document.querySelectorAll('.blurify'), 12. blur: 2, //值为length px 13. mode: 'auto', // auto css 14. }); 15. })(); 16. </script>
demo地址：https://github.com/zhangfeng001/blurify-demo
SSH：git@github.com:zhangfeng001/blurify-demo.git
