‘壹’ js对从服务器取得的图片进行压缩显示
浏览器前端里面跑js没办法压缩图片的，js没io，只能载入图片，无法读入真正的图片数据
‘贰’ 怎样在客户端 利用js 压缩图片 大小，然后上传至服务器比如2M压缩成几十KB
无法实现，js没有权限去修改本地文件的，只能是将大图上传到服务器后再压缩
‘叁’ 前端把图片压缩转换成base64编码把值赐予input='hidden' 之后提交给后台. HTML5,PHP,javascript,canvas
缺点你无法直接验证传来的base64数据的完整性，比如大小，文件头之类的，还需要自己来实现。
‘肆’ <img> 里如何调图片压缩javascript
是不是让图片的大小自动改变？
如果是，只要设置<img>的width和height属性就行了。
‘伍’ 当前使用JS在前端完成图片压缩的有哪些方法
这个base64的编码并不能减小图片，反而增大了，大概增大了1/3。至于有没有其他的方法我就不知道了，不过直接构造Blob对象上传就行了，为什么要上传dataurl
‘陆’ 如何压缩javascript和css文件
一、压缩html和javascript：
我们用站长工具的JavaScript-HTML格式化工具，我们打开页面，我今天要压缩的文件js文件：common.js ，把js代码复制到到JavaScript/HTML格式化工具里面如下图所示：
点击下面的“普通压缩”和“加密压缩”按钮，经过我的精心测试，使用“加密压缩”，对文件压缩率是最好的，所以点击“加密压缩”，压缩后如图：
javascript代码压缩后，我们就把这些代码在复制到common.js文件里面，在吧这个文件上传到空间原来的位置，进行访问是否存在一些错误，如果没有什么问题说明压缩成功；
我的common.js 文件压缩前和压缩后的对比：
压缩前：
压缩后：
文件压缩前和压缩后确实有明确的减少，说明压缩确实减少文件的大小，
我们来测试文件压缩前和压缩后所有能的时间做对比(我是用火狐插件测试传输速度)：
压缩前所用时间：
压缩后所用时间：
压缩前所用时间是：125ms，压缩后所用时间：78ms ，文件压缩后给我们节省大量的时间，如果每个js都进行压缩，我们房子访问速度会更快的。
(注：html文件和javascript压缩原来一样的，当时压缩html要用到“普通压缩”按钮压缩)
二、压缩css文件：
我们打开站长工具的Css压缩/格式化工具页面，我要压缩的文件是五色旗保健品商城的css主文件style.css，首先我们打开站长工具的Css压缩/格式化工具页面 ，把style.css 代码放到Css压缩/格式化工具里面，如下图所示：
点击“压缩代码”按钮后，css代码压缩成功，如下图所示：
后边就是压缩后的css代码，你要不右边的代码复制到源文件style.css里面在上传到服务器空间里面，在访问一下网，看看网页样式有没有改变，如果有点变化就需要简单的调试一下，如果没有变样，说明你的css压缩成功了；
下面我们来看看styl.css文件压缩前和压缩后的大小和放在访问速度的大小：
文件大小对比：
压缩前：
压缩后：
压缩前30kb，压缩后23kb，明显的文件大小减小了
压缩前所用时间：
css压缩前的时间.jpg (7.36 KB, 下载次数: 0)
下载附件
css压缩前的时间.jpg
2013-11-2 00:35 上传
压缩后所用时间：
压缩前所用时间是：188ms，压缩后所用时间：93ms ，css压缩后明显的节省了95ms；
总结：一个大的网站可能会有很多的javascript和css，如果没有都进行压缩的话，一定会减少很多文件大小的，其实减少文件大少并不是很重要，最重要的是，文件容量减少了，能够快速的提高网站访问的速度，给用户带来好的体验，我们尽量的把文件压缩到最小，这样才有利于用户快速的打开网站，至此我的五色旗保健品商城优化后，我的每天的访问量也增加了很多。
‘柒’ 怎么用JavaScript在线压缩图片
主要用了两个html5的 API，一个file，一个canvas，压缩主要使用cnavas做的，file是读取文件，之后把压缩好的照片放入内存，最后内存转入表单下img.src，随着表单提交。
照片是自己用单反拍的，5M多，压缩下面3张分别是600多kb，400多kb，300kb的最后那张失真度很大了，压缩效率蛮高的。
<!DOCTYPE html>
<html><head> <meta charset="utf-8"/> <title>File API Test</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="js/JIC.js"></script> <style> #test{ display: none; } </style></head><body><input type="file" id="fileImg" ><form> <img src="" id="test" alt=""></form><script> function handleFileSelect (evt) { // var filebtn = document.getElementById(id); // console.log(filebtn); // var files = filebtn.target.files; // console.log(filebtn.target); // console.log(files); var files = evt.target.files; for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { // Render thumbnail. // console.log(evt.target.files[0]); // console.log(e.target); console.log(e.target.result); var i = document.getElementById("test"); i.src = event.target.result; console.log($(i).width()); console.log($(i).height()); $(i).css('width',$(i).width()/10+'px'); //$(i).css('height',$(i).height()/10+'px'); console.log($(i).width()); console.log($(i).height()); var quality = 50; i.src = jic.compress(i,quality).src; console.log(i.src); i.style.display = "block"; }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } } document.getElementById('fileImg').addEventListener('change', handleFileSelect, false);</script></body></html>
var jic = { /** * Receives an Image Object (can be JPG OR PNG) and returns a new Image Object compressed * @param {Image} source_img_obj The source Image Object * @param {Integer} quality The output quality of Image Object * @return {Image} result_image_obj The compressed Image Object */ 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'); //naturalWidth真实图片的宽度 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; }, function ****(***)
‘捌’ 如何利用JS或者CSS样式来自动调整图片大小
js版和css版自动按比例调整图片大小方法，分别如下：
<title>javascript图片大小处理函数</title>
<scriptlanguage=Javascript>
varproMaxHeight=150;
varproMaxWidth=110;
functionproDownImage(ImgD){
varimage=newImage();
image.src=ImgD.src;
if(image.width>0&&image.height>0){
varrate=(proMaxWidth/image.width<proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
if(rate<=1){
ImgD.width=image.width*rate;
ImgD.height=image.height*rate;
}
else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
</head>
<body>
<imgsrc="999.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
<imgsrc="room.jpg"border=0width="150"height="110"onload=proDownImage(this);/>
</body>
纯css的防止图片撑破页面的代码，图片会自动按比例缩小：
<styletype="text/css">
.content-width{MARGIN:auto;WIDTH:600px;}
.content-widthimg{MAX-WIDTH:100%!important;HEIGHT:auto!important;width:expression(this.width>600?"600px":this.width)!important;}
</style>
<divclass="content-width">
<p><imgsrc="/down/js/images/12567247980.jpg"/></p>
<p><imgsrc="/down/js/images/12567247981.jpg"/></p>
</div>
‘玖’ 图片网站如何加速
想要让图片的加载速度提升，有几个方法可以试一试：第一、选择合适的图片尺寸。网站上传图片需要注意图片尺寸，这样才能提高网站整体加载速度。第二、图片类型要准确。网站建设中常见的图片类型一般都是JPG或者是Png格式的图片，选择这种类型的图片能够有效减少文件的大小，图片的清晰度也能有所提高。第三、降低图片大小。上传图片一定要通过图片压缩软件进行优化，减小文件大小，通过图片压缩处理后既能让图片不失真，又能减少图片大小，这样的图片对网页加载速度大大改观。还有就是能通过CDN就行网站加速，来提高图片的加载速度了。CDN 内容分发网络服务对于访问加速效果非常明显，能最大程度提升网页加载速度，改善用户访问体验。如果你是企业客户认为这些流量不够用，热销流量包应该适合企业采购，100GB CDN境内流量包 9.9元，1T CDN境内流量包 99元，10T CDN境内流量包 999元。
‘拾’ js把页面图片打包成zip格式
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<style>
img{
width:200px;
height:150px;
}
</style>
</head>
<body>
<imgsrc="http://pic.pptbz.com/201506/2015070581208537.JPG"/>
<imgsrc="http://img.taopic.com/uploads/allimg/121014/234931-1210140JK414.jpg"/>
<imgsrc="http://img.zcool.cn/community/.jpg"/>
<imgsrc="http://img.zcool.cn/community/.jpg"/>
<br/><br/>
<buttononclick="packageImages()">packageImages</button><spanid="status"></span><br/><br/>
<scripttype="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jszip.min.js"></script>
<scripttype="text/javascript"src="js/FileSaver.js"></script>
<scripttype="text/javascript">
functionpackageImages(){
$('#status').text('处理中。。。。。');
varimgs=$('img');
varimgsSrc=[];
varimgBase64=[];
varimageSuffix=[];//图片后缀
varzip=newJSZip();
zip.file("readme.txt","案件详情资料 ");
varimg=zip.folder("images");
for(vari=0;i<imgs.length;i++){
varsrc=imgs[i].getAttribute("src");
varsuffix=src.substring(src.lastIndexOf("."));
imageSuffix.push(suffix);
getBase64(imgs[i].getAttribute("src"))
.then(function(base64){
imgBase64.push(base64.substring(22));
//console.log(base64);//处理成功打印在控制台
},function(err){
console.log(err);//打印异常信息
});
}
functiontt(){
setTimeout(function(){
if(imgs.length==imgBase64.length){
for(vari=0;i<imgs.length;i++){
img.file(i+imageSuffix[i],imgBase64[i],{base64:true});
}
zip.generateAsync({type:"blob"}).then(function(content){
//seeFileSaver.js
saveAs(content,"images.zip");
});
$('#status').text('处理完成。。。。。');
}else{
//console.log('imgs.length:'+imgs.length+',imgBase64.length:'+imgBase64.length);
$('#status').text('已完成：'+imgBase64.length+'/'+imgs.length);
tt();
}
},100);
}
tt();
}
//传入图片路径，返回base64
functiongetBase64(img){
functiongetBase64Image(img,width,height){//width、height调用时传入具体像素值，控制大小,不传则默认图像大小
varcanvas=document.createElement("canvas");
canvas.width=width?width:img.width;
canvas.height=height?height:img.height;
varctx=canvas.getContext("2d");
ctx.drawImage(img,0,0,canvas.width,canvas.height);
vardataURL=canvas.toDataURL();
returndataURL;
}
varimage=newImage();
image.crossOrigin='Anonymous';
image.src=img;
vardeferred=$.Deferred();
if(img){
image.onload=function(){
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
}
returndeferred.promise();//问题要让onload完成后再returnsessionStorage['imgTest']
}
}
</script>
</body>
</html>