手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> JS压缩图片相关方法和使用

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

36550 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图片压缩开源工具

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 已经请假,加上国庆,要很长一段时间不在北京了。919加班,搞的现在有点心累,胸闷,身体不适。看来,我要好好休息一下了。这几天有些冷,2016的冬天,一步步来了,各位亲友,记得添衣加粗啊。

    2016-09-23 17:29

  • 更多»

最新文章
热门文章
随机文章