传送门:
JS 图片上传预览
http://javacui.com/javascript/296.html
JS图片上传预览 Android上的问题
http://www.javacui.com/javascript/381.html
JS图片压缩开源工具
http://www.javacui.com/javascript/391.html
需要在页面增加的标记:
<!-- 最终传到后台的值,实际是BASE64后的图片内容 --> <input type="hidden" name="photoAstr" id="photoAstr" /> <!-- 上传标签 --> <input type="file" id="photoA" name="photoA"> <!-- 图片预览 --> <img id="picZhengMian" class="info_id_img" src="<%=request.getContextPath() %>/images/a.jpg" alt="" width="94%">
相关处理方法:
document.getElementById('photoA').addEventListener('change', handleFileSelectA, false); // 增加上传标签监听事件 function handleFileSelectA (ePara) { var ctx=null; try{ var canvas = document.createElement('canvas'); var ctx = canvas.getContext("2d"); if (ctx== undefined || typeof(ctx) == "undefined"){ ctx=null; } }catch(e){ ctx=null; } if(ctx!=null){ var file = this.files['0']; var URL = URL || webkitURL; var blob = URL.createObjectURL(file); _compress(blob,file,"picZhengMian","photoAstr"); }else{ lrz(this.files[0], { width:800, height:503, before: function() { }, fail: function(err) { alert(err); }, always: function() { alert("always"); }, done: function (results) { alert("done"); var img = results.base64; img = img.replace("data:base64","data:image/jpeg;base64"); // Android Client Bug $("#photoAstr").val(img); document.getElementById('picZhengMian').src = img; // 预览 } }); } }
公用JS方法:
function _compress(blob,file,yulan,dataStr){ var img = new Image(); img.src = blob; img.onload = function(){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var w = this.width; var h = this.height; var quality=0.4; $(canvas).attr({width : w, height : h}); ctx.drawImage(this, 0, 0, w, h); var base64 = canvas.toDataURL(file.type, (quality || 0.8)*1 ); if( navigator.userAgent.match(/iphone/i) ) { var mpImg = new MegaPixImage(img); mpImg.render(canvas, { maxWidth: w, maxHeight: h, quality: quality || 0.8, orientation: 6 }); } // 修复android if( navigator.userAgent.match(/Android/i) ) { var encoder = new JPEGEncoder(); base64 = encoder.encode(ctx.getImageData(0,0,w,h), quality * 100 || 80 ); } document.getElementById(dataStr).value = base64; document.getElementById(yulan).src = base64; // 预览 }; }
_compress方法上面已经给出来了,lrz其实是借用了别人的一个JS,来实现JS压缩图片和JS预览图片,详见开头JS图片压缩开源工具。
之前用的一个方法是这样的,也实用了readAsDataURL方法,也实用了CVS对象。
var jic = { compress: function(source_img_obj, quality, output_format){ // 压缩方法 var mime_type = "image/jpeg"; if(output_format!=undefined && output_format=="png"){ mime_type = "image/png"; } var cvs = document.createElement('canvas'); cvs.width = source_img_obj.naturalWidth; cvs.height = source_img_obj.naturalHeight; var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0); var newImageData = cvs.toDataURL(mime_type, quality/100); var result_image_obj = new Image(); result_image_obj.src = newImageData; return result_image_obj; } }
此时需要一个临时接收对象
<img name="imgTempA" id="imgTempA" alt="" style="display: none;" /> function handleFileSelectA (evt) { var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var i = document.getElementById("imgTempA"); // 临时图片,用于承装压缩后的数据信息 i.src = event.target.result; $(i).css('width',$(i).width()/10+'px'); var quality = 10; // 图片压缩比例 i.src = jic.compress(i,quality).src; $("#photoAstr").val(i.src); // 用于传递到后台的图片信息,注意该信息是带有消息头的一组信息 }; })(f); reader.readAsDataURL(f); } }
同样实用监听来触发事件。