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 相关文章推荐
jquery div 居中技巧应用介绍
Nov 24 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JavaScript原型式继承实现方法
Nov 06 Javascript
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实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php jsonp单引号转义
2014/11/23 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
Javascript !!的作用
2008/12/04 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
Python在图片中添加文字的两种方法
2017/04/29 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python3使用PySynth制作音乐的方法
2019/09/09 Python
python切割图片的示例
2020/11/12 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
如何写你的创业计划书
2014/01/07 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
教师个人考察材料
2014/12/16 职场文书
遗愿清单观后感
2015/06/09 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
MySQL存储过程及语法详解
2022/08/05 MySQL
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技