移动端上传预览压缩图片
一、功能和问题解析
图片上传，在移动端可以使用input为file，通过base64上传图片
移动端file有兼容上的问题
移动端端图片都是几M，必须压缩
二、功能的实现和问题的解决
- 初始页面布局
.add{ width: 100%; height: 100%; text-align: center; border: 1px solid # ccc; } .img-box{ position: relative; display: inline-block; margin: 10px 0px; width: 80px; height: 80px; color: # 999; } .upload{ position: absolute; top: 0; left: 0; padding: 0; width: 100%; height: 100%; opacity: 0; } .add span{ display: inline-block; margin-top: 28px; } img{ display: none; width: 100%; height: 100%; } 照片 +![超级产品经理](" >- 移动端file有兼容上的问题的解决
这样可以解决点击调用相册的问题
上传图片、预览并且图片压缩
方法为：把图片变成base64位，使用canvas进行压缩，不过在ios中图片大于2000000像素就无法使用canvas压缩，就需要瓦片绘制。
var upload = document.getElementById('upload');//上传 var pic = document.getElementById('pic');//图片 var add = document.getElementById('add');//空图片样式 var maxsize = 100* 1024;//超过100k进行压缩 if (typeof(FileReader) === 'undefined') { alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！"); upload.setAttribute('disabled', 'disabled'); } upload.addEventListener('change', function(){ add.css('display')=='block'&&add.css("display","none"); pic.css('display')=='none'&&pic.css("display","block"); var file = this.files[0], result = '', reader = new FileReader(); if(file){ pic.setAttribute('src','loading.gif'); } reader.readAsDataURL(file); reader.onload = function(e){ var v = this.result;//获取到base64的图片 img = new Image(); img.src = v; //大于100k图片进行压缩 if(v.length>=maxsize){ img.onload = function(){ pic.setAttribute('src',compress(img,95).src); ajax提交 } }else{ ajax提交 } } } //压缩函数 压缩成宽度为400px function compress(source_img_obj, quality){ var area = source_img_obj.width*source_img_obj.height; var cvs = document.createElement('canvas'); cvs.width = 400; var value = source_img_obj.width/400; var height = source_img_obj.height/value; cvs.height = height; var ctx = cvs.getContext("2d"); var version = common.browser(); //解决ios 图片大于2000000像素无法用drawImage的bug if(area>2000000&&navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ //瓦片绘制 var tCanvas = document.createElement("canvas"); var tctx = tCanvas.getContext("2d"); var count = Math.ceil(area/1000000); tCanvas.height = height; tCanvas.width = 400/count; var canvas_width = 400/count; var pic_width = source_img_obj.width/count; var pic_height = source_img_obj.height; for(var i=0;i<count;i++){ tctx.drawImage(source_img_obj,i*pic_width,0,pic_width,pic_height,0,0,canvas_width,height); ctx.drawImage(tCanvas,i*canvas_width,0,canvas_width,height); } }else{ ctx.drawImage(source_img_obj,0,0,400,height); } var newImageData = cvs.toDataURL('image/jpeg',quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; }第一次写文章如上有问题，我会继续完善
关键字：JavaScript, html
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
