借助html5，本地转换图片格式/缩放图片/图片滤镜

2015/04/11 33794
<!DOCTYPE HTML>
<html>
<body>
<style>
button{
cursor:pointer;
width:24%;
border:1px;
padding:0px;
}
.c{
max-width:800px;
}
</style>
<center>
<div class="c">
<div align="left" height="105" style="background:#a54;min-height:100px;width:100%;max-width:800px" ondragenter="return false" ondragover="return false" ondrop="dropIt(event);">
<div align="center">第一步：拖动图片到此处<br>请允许弹出窗口，<br>否则除第一张之外的图片无法输出结果<br><p id="num"></p></div>
	<output id="thumbs" style="display:none"></output>
</div>
<div>
<div align="left">第二步：写上你的图片canvas算法，<br>仅当你需要对图片进行额外加工（如反色，加水印）操作时使用<br/>
<br/>警告！！如果你的图片过大，将可直接导致页面崩溃，请不要选择PNG格式输出。<br/>尽量每次转码后，点击重置按钮或者刷新一下页面再转码下一批。<br />
<small>canvas标签的DOM对象"canvas"，canvas的二维绘图对象"can",图像的宽高为w和h,缩放后的大小为img_height*img_width<br />需要绘制的图像为imge，可以使用can.drawImage(img,0,0,img_width,img_height)向canvas中重新绘制目标图片。<br>否则你的绘制会显示在图像上方<br />例如<br />
	<code align="left" style="width:400px"><pre>
ctx=can;
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
ctx.fillStyle="#0000ff";
ctx.font="40px Arial";
ctx.fillText("Hello World",img_height-300,50);
	</pre></code>
</small>
</div>
<div align="center"><textarea style="width:70%;height:100px" id="textarea"></textarea></div>

</div>
<div align="left" height="105" style="background:#a54;min-height:50px;width:100%;max-width:800px" align="center">
	<center><label for="height">H:</label>
	<input placeholder="留空为默认高度" type="text" id='height' onkeyup="s_height=this.value;thii()" onchange=""/>
	<label for="width">W:</label>
	<input placeholder="留空为默认宽度" type="text" id='width' onkeyup="s_width=this.value;thii()" onchange=""/><br/>
	<small>高度和宽度可使用js表达式，用h和w表示原始高宽</small>
	</center>
	<div>
	<button onclick="jpg('jpeg')">jpeg</button>
	<button onclick="jpg('webp')">webp</button>
	<button onclick="jpg('png')">png</button>
	<button onclick="document.getElementById('thumbs').innerHTML='';ok();">重置</button>
	</div>

</div>
<div id="done" style="display:none"></div>
<div id="donen"> 
生成后右击另存为。注意请允许弹出窗口。否则无法同时转码多张图片。
</div>
</div>
</center>
<script>
var canvas,can;
var s_height,s_width;
var w,h;
var img_height,img_width;
window.img=new Array();
num=document.getElementById('num');
dui=0;
s=new Array();
function imagesSelected(myFiles){
	for(var i=0,f;f=myFiles[i];i++){
		var imageReader=new FileReader();
		imageReader.onload=(function(aFile){
			return function(e){
				var span=document.createElement('span');
				span.innerHTML=['<img class="image" src="',e.target.result,'" title="',aFile.name,'"/>'].join('');
				document.getElementById("thumbs").insertBefore(span,null);
				dui++;
				num.innerHTML="共"+dui+"个文件";
				
			};
		
		})(f);
		imageReader.onloadend=function(e){
			setTimeout('ok()',100);
		}
		
		imageReader.readAsDataURL(f);
	}
}

function dropIt(e){
	imagesSelected(e.dataTransfer.files);
	e.stopPropagation();
	e.preventDefault();
}
function thii(){
	if(s_width||s_height){
		document.getElementById('height').placeholder='h*('+s_width+')/w';
		document.getElementById('width').placeholder='w*('+s_height+')/h';
		}else{
		document.getElementById('height').placeholder='留空为默认高度';
		document.getElementById('width').placeholder='留空为默认宽度';
		
		}
}

function ok(){
	window.img=document.getElementsByClassName("image");
	num.innerHTML="共"+window.img.length+"个文件";
	for(i=0;i<window.img.length;i++)
	num.innerHTML+="<br />"+window.img[i].title+':w'+window.img[i].width+'*h'+window.img[i].height;
	
}
var jpg=function(type){
	window.type=type;
	textarea=document.getElementById('textarea');
	done=document.getElementById('done');
	done.innerHTML='';
	donen=document.getElementById('donen');
	donen.innerHTML='';
	for(i=0;i<window.img.length;i++){
		var span=document.createElement('span');
		h=window.img[i].height;
		w=window.img[i].width;
		img_height=null;
		img_width=null;
		
		if((!s_height)||(s_height==0)){
			img_height=null;
		}else{
			try{
			img_height=eval(s_height);
			}catch(exception){img_height=0;}
		}
		if((!s_width)||(s_width==0)){
			img_width=null;
		}else{
			try{
				img_width=eval(s_width);
			}catch(exception){img_width=null;}
		}
		img_height=(typeof(img_height)=='number')?img_height:h;
		img_width=(typeof(img_width)=='number')?img_width:h;
		
		span.innerHTML='<canvas class="canvas" height="'+img_height+'" width="'+img_width+'"></canvas>';
		document.getElementById("done").insertBefore(span,null);
		//var span=document.createElement('span');
	
	}
	
	setTimeout('end()',500);

}

function end(){
	type=window.type;
	window.canvasv=document.getElementsByClassName("canvas");
	donen=document.getElementById('donen');
	//donen.innerHTML='';
	for(i=0;i<window.canvasv.length;i++){
		canvas=window.canvasv[i];
		can=canvas.getContext("2d");
		imge=window.img[i];
		can.fillStyle="#000000";
		can.fillRect(0,0,img_width,img_height);
		can.drawImage(imge,0,0,img_width,img_height);
		can.save();
		try  {
			eval(textarea.value);
		}
		catch(exception) {
		 alert("textarea内容错误，已恢复默认输出");
		 can.restore();
		}
		type="image/"+type;
		myWindow=window.open('',window.img[i].title,'width=500,height=500,top='+(i*2)+'0,left='+(i*5)+'0')
		var sz="<title>"+window.img[i].title+"</title><img src='"+canvas.toDataURL(type)+"' title='"+window.img[i].title+"' width=100%/><br />右击保存";
		//donen.innerHTML+=sz;
		myWindow.document.write(sz);
		myWindow.focus()
	
	}

}
</script>
</body>
</html>
代码片段
