今天被问到前端怎么图片压缩，然后就一顿的查资源，终于知道前端怎么压缩图片。
关键：
上面两个是关键方法，是html5后出现的好东西。
就是把图片转换成Base64编码，那样就可以不用理图片在哪了，
他就被你转换成编码了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js压缩图片</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="container"></div>
<script>
/*图片地址
https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E9%AB%98%E6%B8%85%E7%BE%8E%E5%A5%B3%20%E4%B8%9D%E8%A2%9C%E5%B7%A8%E4%B9%B3&step_word=&hs=0&pn=1&spn=0&di=57234189540&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=2&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=-1&cs=3589338782%2C536437810&os=3988412231%2C488396405&simid=3515890414%2C233897128&adpicid=0&lpn=0&ln=1389&fr=&fmq=1490709487003_R&fm=result&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150416%2F139-1504161AK9.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bkzcc_z%26e3Bv54AzdH3F4jtgektzitAzdH3F8l9c9_z%26e3Bip4s&gsm=0&rpstart=0&rpnum=0
*/
$(function(){
$("#file").on("change",function(){
var file=this.files[0];
photoCompress(file,50,$("#container")[0])
});
})
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objDiv){
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(re,w,objDiv){
var newImg=new Image();
newImg.src=re;
var imgWidth,imgHeight,offsetX=0,offsetY=0;
newImg.onload=function(){
var img=document.createElement("img");
img.src=newImg.src;
imgWidth=img.width;
imgHeight=img.height;
var canvas=document.createElement("canvas");
canvas.width=w;
canvas.height=w;
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,w,w);
if(imgWidth>imgHeight){
imgWidth=w*imgWidth/imgHeight;
imgHeight=w;
offsetX=-Math.round((imgWidth-w)/2);
}else{
imgHeight=w*imgHeight/imgWidth;
imgWidth=w;
offsetY=-Math.round((imgHeight-w)/2);
}
ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
var base64=canvas.toDataURL("image/jpeg",0.7);
if(typeof objDiv == "object"){
objDiv.appendChild(canvas);
}else if(typeof objDiv=="function"){
objDiv(base64);
}
}
}
</script>
</body>
</html>
直接调用这个方法:
photoCompress()传进参数就可以实现压缩了，这是上传图片的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js压缩图片</title>
<script src="jquery.js"></script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="container"></div>
<script>
/*跨域是无法做的*/
$(function(){
var newImg=new Image();
newImg.src="./timg.jpg";
newImg.onload=function(){
var currentImg=document.createElement("img");
currentImg.src=newImg.src;
photoCompress(currentImg,50,$("#container")[0])
}
})
/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
*/
function photoCompress(file,w,objDiv){
if(file.tagName.toLocaleLowerCase()=="img"){
canvasDataURL(file.src,w,objDiv);
return false;
}
var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
ready.readAsDataURL(file);
ready.onload=function(){
var re=this.result;
canvasDataURL(re,w,objDiv)
}
}
function canvasDataURL(re,w,objDiv){
var newImg=new Image();
newImg.src=re;
var imgWidth,imgHeight,offsetX=0,offsetY=0;
newImg.onload=function(){
var img=document.createElement("img");
img.src=newImg.src;
imgWidth=img.width;
imgHeight=img.height;
var canvas=document.createElement("canvas");
canvas.width=w;
canvas.height=w;
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,w,w);
if(imgWidth>imgHeight){
imgWidth=w*imgWidth/imgHeight;
imgHeight=w;
offsetX=-Math.round((imgWidth-w)/2);
}else{
imgHeight=w*imgHeight/imgWidth;
imgWidth=w;
offsetY=-Math.round((imgHeight-w)/2);
}
ctx.drawImage(img,offsetX,offsetY,imgWidth,imgHeight);
var base64=canvas.toDataURL("image/jpeg",0.7);
if(typeof objDiv == "object"){
objDiv.appendChild(canvas);
}else if(typeof objDiv=="function"){
objDiv(base64);
}
}
}
</script>
</body>
</html>
这是同域图片压缩。
时间： 2024-10-24 04:13:22