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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
使用angularjs创建简单表格
Jan 21 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
vue编写简单的购物车功能
Jan 08 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python中round函数保留两位小数的方法
2020/12/04 Python
用python制作个音乐下载器
2021/01/30 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
抽象类和接口的区别
2012/09/19 面试题
运动会入场词200字
2014/02/15 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
吨的认识教学反思
2014/04/27 职场文书
幼师辞职信范文
2015/02/27 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python