全国服务热线:4008-888-888

技术知识

html5 canvas挪动访问器上完成照片缩小提交

近期在挪动端设计方案头像提交作用时,本来是以<input type="file">立即根据formData提交,但是具体应用状况是:针对过大的照片(高像素手机上所拍攝的相片等)提交時间太长会致使提交不成功,而每次都提交初始尺寸的照片(后台管理解决缩小)10分危害客户体验,因此科学研究了1下根据canvas缩小照片并提交的方式,下列是梳理的1些思路和心得:

1、<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. }   

2、图象在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、当地调节时会有1个出错,缘故为跨域难题,必须再服务端调节;

2、canvas中的drawImage()方式具有图象裁剪作用,但将图象拉伸和裁剪另外写入的话,会优先选择实行裁剪的方式;

3、应用AJAX提交图象编号时,编号内的加号会被转成空格提交致使后台管理编译程序不成功;

4、有关对照片地区挑选提交的方式尚在尝试环节,后续会补上心得。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

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



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服