html5 canvas移动浏览器上实现图片压缩上传


Posted in HTML / CSS onMarch 11, 2016

最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等)上传时间过长会导致上传失败,而每次都上传原始大小的图片(后台处理压缩)十分影响用户体验,所以研究了一下通过canvas压缩图片并上传的方法,以下是整理的一些思路和心得:

一、<input type="file">获取本地图片,并将图片绘制到画布中。此处的难点在于:由于浏览器的保护机制,无法直接获取到本地文件的图片路径,所以需要将本地图片编译成base64格式再做上传,代码如下:

JavaScript Code复制内容到剪贴板
  1. var result = document.getElementById("/* 出错信息显示块 */");   
  2. var input = document.getElementById("/* 上传文件标签 */");   
  3.   
  4. if(typeof FileReader === 'undefined'){   
  5.   result.innerHTML = "<p class='warn'>抱歉,你的浏览器不支持 FileReader</p>";   
  6.   input.setAttribute('disabled','disabled');   
  7. }else{   
  8.   input.addEventListener('change',readFile,false);   
  9. }   
  10.   
  11. function readFile(){   
  12.   var file = this.files[0];   
  13.   if(!/image\/\w+/.test(file.type)){   
  14.     alert("请确保文件为图像类型");   
  15.     return false;   
  16.   }   
  17.   var reader = new FileReader();   
  18.   reader.readAsDataURL(file);   
  19.   reader.onload = function(e){   
  20.     //  this.result 编译后的图像编码,可直接用src显示   
  21.   }   
  22. }   

二、图像在canvas中的处理

JavaScript Code复制内容到剪贴板
  1. var c=document.getElementById("/* canvas标签的id */");   
  2. var cxt=c.getContext("2d");   
  3. var img=new Image();   
  4. img.src=/* 获取的图片编码地址 */;   
  5. var width = img.width;   
  6. var height = img.height;   
  7. dic = height / width;   
  8. c.width = 200;  //图片压缩的标准,这里是按照定款200px计算   
  9. c.height = 200 * dic;   
  10. cxt.clearRect(0,0,200,200*dic);   
  11. cxt.drawImage(img,0,0,200,200*dic);   
  12. var finalURL = c.toDataURL();     
  13. //  最终得到的 finalURL 即为压缩后的图片编码,可用来上传或者直接生成img标签   

这里需要注意的几点是:

1、本地调试时会有一个报错,原因为跨域问题,需要再服务端调试;

2、canvas中的drawImage()方法具备图像剪裁功能,但将图像拉伸和剪裁同时写入的话,会优先执行剪裁的方法;

3、使用AJAX上传图像编码时,编码内的加号会被转成空格上传导致后台编译失败;

4、关于对图片区域选择上传的方法尚在尝试阶段,后续会补上心得。

以上就是本文的全部内容,希望对大家的学习有所帮助。

原文:http://www.cnblogs.com/liaojh/p/5209433.html

HTML / CSS 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 #HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 #HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 #HTML / CSS
HTML5的新特性(1)
Mar 03 #HTML / CSS
HTML5 Canvas实现烟花绽放特效
Mar 02 #HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 #HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 #HTML / CSS
You might like
URL Rewrite的设置方法
2007/01/02 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python3编写C/S网络程序实例教程
2014/08/25 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
喝酒检查书范文
2014/02/23 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
关于的python五子棋的算法
2022/05/02 Python