html5 js 图片压缩,js压缩图片

html>

    

    

var maxWidth = 300;

var maxHeight = 300;

// 创建 canvas

var c=document.getElementById("canvas");

var ctx=c.getContext("2d");

// 创建要绘制的Image对象

var img = new Image();

img.src = "e.png";

// 等待img加载完毕

img.onload = function(){

// 与backgournd-size:contain效果相同

if(img.width/img.height

c.height = img.height;

if(img.height>maxHeight){

c.height = maxHeight;

}

c.width = img.width/img.height*c.height;

}else{

c.width = img.width;

if(img.width>maxWidth){

c.width = maxWidth;

}

c.height = img.height/img.width*c.width;

}

ctx.drawImage(img,0,0,img.width,img.height,0,0,c.width,c.height);

document.getElementById("new_p_w_picpath").src=c.toDataURL();

};