Java小强个人技术博客站点    手机版
当前位置： 首页 >> JS >> JS压缩图片相关方法和使用

JS压缩图片相关方法和使用

175950 JS | 2015-9-29

传送门：

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);
    }
}

同样实用监听来触发事件。


推荐您阅读更多有关于“ js 开源 压缩 Base64 图片压缩 ”的文章

上一篇：关于站点加速变更的自我记录 下一篇：JS图片压缩开源工具

猜你喜欢

发表评论：