javascript处理图像的压缩、剪切、模糊和上传。最近在研究H5前端图片处理相关技术，方向有图片压缩、裁切、旋转、模糊等，现在已经整理成对应的demo，上传至github。
http://www.Sina.com/http://www.Sina.com /
一：js脚本实现图片压缩 -CompressImageUtiles
特点：
原图5.4MB
压缩后136KB
使用方法：
//html input type=' file ' id=' input-img '//部署脚本script src='./compressimageutiles.js '/script script/* * 支持let inputdom=document.query selector (# input-img )、inputDom.onchange=function ) ) constfileobj=inputdoon } function _ compressanduploadfile (file ) compress image (file ).then ) resultobj={let}canvas，blob，base64，file fileName )//downloadimgfromblob ) blob，fileName ) } ) /下载function ) /上传Params.append('file '，file； } demo地址： https://github.com/Zhangfeng 001/compressutls-demo
sh : git @ github.com : Zhangfeng 001/compressutls-demo.git
http://www.Sina.com/http://www.Sina.com /
1 体积小，4kb；
预览效果：
使用方法介绍：
1、下载demo在main.js上查看以下方法：
if (data.method==(getcroppedcanvas ) ) getcroppedcanvasmodal ).modal ).find ).modal-body ) ) ) console.log(result ) 2，通过这种方法可以查看log。 可以获得多种图像数据类型。 有canvas、base54和blob。 选择一个上传就可以了
demo地址： https://github.com/Zhangfeng 001/cropper-demo
sh:git @ github.com : Zhangfeng 001/cropper-demo.git
(三)基于CSS3和canvas的图像模糊处理blurify.js 2 支持blob格式上传和base64格式上传
效果的展示
使用方法介绍：超简单
div class=' blur ify-container ' img src='./test/Miao.jpg ' class=' img ' imgdata-src='./test/Miao.jpg WG Wang.jpg ' class=' blur ify '/divscriptsrc=' dist/blur ify.{ blur ify (images : document.queryselectorall ) }.blur /script demo地址： https://github.com/Zhangfeng 001/blur ify-demo
sh:git @ github.com : Zhangfeng 001/blur ify-demo.git