js实现图片压缩上传

简介: 最近在研究H5前端图片处理相关技术,方向有图片压缩、裁切、旋转、模糊等。

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

目录
相关文章
|
JavaScript 前端开发
JS压缩图片,在线图片压缩,Cavas压缩图片
1. 选择一张图片 const img_original = document.getElementById('img_original'); const img_output = document.
2742 0
|
前端开发 JavaScript
JS—图片压缩上传(单张)
*vue+webpack环境,这里的that指到vue实例 &lt;input type="file" name="file" accept="image/*" @change="selectImgs" ref="file"...
2543 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
95 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
92 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
62 3
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物医院系统附带文章源码部署视频讲解等
56 2