JS和Canvas实现图片的预览压缩和上传功能


Posted in Javascript onMarch 30, 2018

先来一张效果图,压压惊

JS和Canvas实现图片的预览压缩和上传功能

第一步:用户选择需要上传的图片

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

在选定了图片后 upload 函数将被触发,我们需要在这个函数中,获取到图片的资源,将它压缩并利用canvas绘制出来,若需要上传到服务器,也可以利用ajax或者其他方式上传。

第二步:获取图片资源压缩预览上传

function upload() { 
  let file = document.querySelector('input[type=file]').files[0] // 获取选择的文件,这里是图片类型 
  let reader = new FileReader() 
    reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式 
    reader.onload = function(e) { // 文件读取完成时触发  
      let result = e.target.result // base64格式图片地址  
      var image = new Image() image.src = result // 设置image的地址为base64的地址  
      image.onload = function(){  
        var canvas = document.querySelector("#canvas");  
        var context = canvas.getContext("2d");  
        canvas.width = image.width; // 设置canvas的画布宽度为图片宽度  
        canvas.height = image.height;  
        context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片  
        let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比,可根据需要设置,设置过小会影响图片质量  
                                  // dataUrl 为压缩后的图片资源,可将其上传到服务器  
      }  
    } 
 }

现在我们来比较一下图片是否成功压缩:

原图大小: 

JS和Canvas实现图片的预览压缩和上传功能  

压缩比设置为0.92:

JS和Canvas实现图片的预览压缩和上传功能

压缩比设置为0.52

JS和Canvas实现图片的预览压缩和上传功能

乍一看,你是不是觉得很奇怪,为什么设置了缩放比为0.92,图片居然比原图大?其实图片通过base64编码后都会变的比原图大,具体原因可以查阅base64的编码原理。如此看来,我们已经成功压缩了图片!

注意点:canvas在IE9以下不支持;大图片尽量不要使用base64,影响响应速度。

总结

以上所述是小编给大家介绍的JS和Canvas实现图片的预览压缩和上传功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js活用事件触发对象动作
Aug 10 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
javascript中 try catch用法
Aug 16 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
Vuex 入门教程
Jan 10 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
Vue单页应用引用单独的样式文件的两种方式
Mar 30 #Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 #Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 #Javascript
js将键值对字符串转为json字符串的方法
Mar 30 #Javascript
webpack4.0打包优化策略整理小结
Mar 30 #Javascript
Angular4学习笔记router的简单使用
Mar 30 #Javascript
vue.js中created方法作用
Mar 30 #Javascript
You might like
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php实现生成验证码实例分享
2016/04/10 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
js转义字符介绍
2013/11/05 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
anaconda如何查看并管理python环境
2019/07/05 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
2014政务公开实施方案
2014/02/19 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
解除施工合同协议书
2014/10/17 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
python urllib库的使用详解
2021/04/13 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
详解SQL的窗口函数
2022/04/21 Oracle