返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

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

2019-01-28 15:17:46王冬梅

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

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

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

二、图像在canvas中的处理

JavaScript Code复制内容到剪贴板
  1. var c=document.getElementById("/* canvas标签的id */");    var cxt=c.getContext("2d");   
  2. var img=new Image();    img.src=/* 获取的图片编码地址 */;   
  3. var width = img.width;    var height = img.height;   
相关文章 大家在看