『壹』 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>