js实现图片压缩上传

javascript 处理图片压缩、剪切、模糊和上传

最近在研究H5前端图片处理相关技术，方向有图片压缩、裁切、旋转、模糊等，现在已经整理成对应的demo，上传至github。

一：js脚本实现图片压缩 - CompressImageUtiles

特点：

1 体积小，4kb；

2 支持blob格式上传和base64格式上传

原图 5.4MB                                                                                                           

 压缩后136KB

用法：

// html
<input type="file" id="input-img">

//引入脚本
<script src="./CompressImageUtiles.js"></script>


<script>
/**
 * 支持blob格式上传和base64格式上传
 * */ 
    let inputDom = document.querySelector('#input-img')
    inputDom.onchange = function(){
        const fileObj = inputDom.files[0];
        _compressAndUploadFile(fileObj);
    }
    function _compressAndUploadFile(file){
        compressImage(file).then(resultObj => {
            let {canvas,blob,base64,fileName,oSize} = resultObj
            if (blob.size > oSize){
                that._uploadFile(file, fileName);
            } else {
            //压缩后比原来小，上传压缩后的
                _uploadFile(blob, fileName)
            }
            // 下载
            downloadImgFromBlob(blob,fileName)
        })
    }
    //上传
    function _uploadFile(file){
        let params = new FormData();
        params.append("file", file);
    }
           

demo地址：https://github.com/zhangfeng001/compressUtls-demo

ssh:[email protected]:zhangfeng001/compressUtls-demo.git

二：jq插件 实现图片剪切、旋转  - imagecropper

特点：1、炫酷的展现效果，可以完美的应用到项目中，如头像上传前选择区域等

           2、输出多种数据格式，直接浏览器打开HTML查看效果

效果预览：

用法介绍：

1、下载demo 在main.js中看到如下方法，

if (data.method === 'getCroppedCanvas') {
    $('#getCroppedCanvasModal').modal().find('.modal-body').html(result.canvas);
    console.log(result)
}
           

2、在此方法中可以查看log，拿到多种图片数据类型 有canvas 、base54、blob，选择一种上传即可

demo地址：https://github.com/zhangfeng001/cropper-demo

ssh：[email protected]:zhangfeng001/cropper-demo.git

三：CSS3和canvas实现图片模糊处理 blurify.js

特点：体积小，实现更方便，

效果展示

用法介绍：超级简单

<div class="blurify-container">
      <img src="./test/miao.jpg" class="img">
      <img src="./test/miao.jpg" class="blurify">
      <img src="./test/wang.jpg" class="img">
      <img src="./test/wang.jpg" class="blurify">
 </div>
 <script src="dist/blurify.js"></script>
 <script>
        (function () {
            blurify({
                images: document.querySelectorAll('.blurify'),
                blur: 2,     //值为length px
                mode: 'auto', // auto css
            });
        })();
 </script>
           

demo地址：https://github.com/zhangfeng001/blurify-demo

SSH：[email protected]:zhangfeng001/blurify-demo.git