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} = resultObjif (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地址:/zhangfeng001/compressUtls-demo
ssh:git@: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地址:/zhangfeng001/cropper-demo
ssh:git@:zhangfeng001/cropper-demo.git
三:CSS3和canvas实现图片模糊处理blurify.js
特点:体积小,实现更方便,
效果展示
用法介绍:超级简单
<div class="blurify-container"><img src="./test/miao.jpg" class="img"><img data-src="./test/miao.jpg" class="blurify"><img src="./test/wang.jpg" class="img"><img data-src="./test/wang.jpg" class="blurify"></div><script src="dist/blurify.js"></script><script>(function () {blurify({images: document.querySelectorAll('.blurify'),blur: 2,//值为length pxmode: 'auto', // auto css});})();</script>
demo地址:/zhangfeng001/blurify-demo
SSH:git@:zhangfeng001/blurify-demo.git