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 相关文章推荐
js相册效果代码(点击创建即可)
Apr 16 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
有关PHP性能优化的介绍
2013/06/20 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
Python3基础之条件与循环控制实例解析
2014/08/13 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
django序列化serializers过程解析
2019/12/14 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python中adb有什么功能
2020/06/07 Python
自学python用什么系统好
2020/06/23 Python
基于Python实现粒子滤波效果
2020/12/01 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
地理科学专业毕业生求职信
2013/10/15 职场文书
幼儿园门卫制度
2014/01/29 职场文书
售后服务承诺书
2014/03/26 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
党员个人年度总结
2015/02/14 职场文书
银行求职信模板
2015/03/20 职场文书
关于召开会议的通知
2015/04/15 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
安全生产标语口号
2015/12/26 职场文书