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

button{

cursor:pointer;

width:24%;

border:1px;

padding:0px;

}

.c{

max-width:800px;

}

第一步：拖动图片到此处
请允许弹出窗口，
否则除第一张之外的图片无法输出结果

第二步：写上你的图片canvas算法，
仅当你需要对图片进行额外加工(如反色，加水印)操作时使用

警告！！如果你的图片过大，将可直接导致页面崩溃，请不要选择PNG格式输出。
尽量每次转码后，点击重置按钮或者刷新一下页面再转码下一批。

canvas标签的DOM对象"canvas"，canvas的二维绘图对象"can",图像的宽高为w和h,缩放后的大小为img_height*img_width
需要绘制的图像为imge，可以使用can.drawImage(img,0,0,img_width,img_height)向canvas中重新绘制目标图片。
否则你的绘制会显示在图像上方
例如

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

H:

W:

高度和宽度可使用js表达式，用h和w表示原始高宽

jpeg

webp

png

重置

生成后右击另存为。注意请允许弹出窗口。否则无法同时转码多张图片。

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.οnlοad=(function(aFile){

return function(e){

var span=document.createElement('span');

span.innerHTML=[''].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

num.innerHTML+="
"+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

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='';

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

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="

"+window.img[i].title+"
右击保存";

//donen.innerHTML+=sz;

myWindow.document.write(sz);

myWindow.focus()

}

}