A. 怎麼用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 ****(***)
B. 百度js和css合並壓縮是如何做的
簡單來說是通過插件實現，當然現在淘寶出的伺服器（nginx修改版）自帶有這個功能。 通過一個url地址里寫上每個js或者css 路徑，然後插件通過路徑將js/css 進行gzip形式壓縮，最後組合成一個文件輸出。你能看到的輸出格式是php後綴，但是輸出文件的表頭是js/CSS 這樣瀏覽器也就當是js/css來解析了。
合並代碼工具我推薦minify （PHP），這個比較早，也很簡單。
壓縮的話網上有很多地方都提供在線壓縮
簡單說說 JS壓縮：
1. 長變數變數名 壓縮為短變數名，去空格，去注釋
2. 可以將 new Array() 改寫為 []， new Object 改寫為{} 雲雲
3. 使用eval， 關鍵詞等等 的復雜邏輯 也可以壓縮
這樣處理過後，如果覺得還是太大了，還可以採用服務端的gzip壓縮傳輸
C. 網頁頁面優化如何合並JS
網站優化，一個是壓縮合並css，js，一個是合並圖片和小圖標來達到減少請求量的目的
合並css和js這個很簡單
比如a.css,b.css,c.css
把裡面的內容都復制到一個css中，main.css這樣手動就可以合並
壓縮的話，網上都有工具來壓縮，直接網路 css壓縮 就可以了
js的話，大部分是可以直接和css一樣，手動合並，然後壓縮的（壓縮方法，和壓縮css一樣，網路去），不過要注意復制到文件時的順序，和代碼裡面的一些規范，不要把依賴什麼的搞混了
如果js文件非常多手動處理很麻煩的時候，可能需要藉助工具來實現，這個，你可以試著用前端的一些載入器（require,seajs）來做一些優化，達到按需載入的目的，推薦用seajs試試
自動壓縮的話，可以用nodejs的grunt來壓縮，很好用
D. 如何利用node進行js css合並壓縮
gulp是基於Node.js的前端構建工具。所以首先需要安裝nodejs，安裝nodejs。
完成nodejs安裝之後，需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp然後在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_moles
好的，現在gulp已經安裝完成了，但是gulp本身不提供js壓縮合並等功能，需要使用gulp的相關插件。目前只需要完成js壓縮合並和css文件壓縮的功能，先安裝相應的插件：
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合並 gulp-concat
由於壓縮之前需要對js代碼進行代碼檢測，壓縮完成之後需要加上min的後綴，我們還需要安裝另外兩個插件：
E. 如何將多個js文件合並為一個js文件
將多個js文件合並為一個js文件的方法是使用查找拷貝粘貼法 ：
1、打開網站主頁，然後右擊滑鼠，選擇「查看源碼」。再按CTRL＋F快捷鍵調出搜索框，在搜索框中輸入
script type='text/javascript'
2、回車確定後。選擇「高亮全部」，就能看見網頁中有多少個外部javascript文件了。如下圖，head中有兩個外部JavaScript。一般在footer部分也能找到外部JavaScript。
3、合並多個js
（1）在網站根目錄下面創建一個文件，命名為main.js。然後編輯main.js文件。
需要將外部JavaScript文件的內容全部粘貼到main.js文件中。
（2）按CTRL＋A選擇全部內容，然後CTRL＋C復制全部內容，將內容粘貼到main.js文件中。再點擊下一個JavaScript文件的 src 地址，依次它們的內容粘貼到main.js文件中。最後保存。
（3）引用main.js文件
main.js創建好以後，需要在wordpress主題文件夾的footer.php文件中引用main.js。footer.php文件的路徑一般為/var/www/html/wp-content/themes/themename/footer.php。
F. js文件 壓縮成一個 是怎麼弄的
gulp + webpack/browserify
用gulp加上webpack或者browserify來完成。js之間使用require相互引用，然後在gulpfile裡面設置把所有文件整合輸出並uglify
G. 網站打開慢，檢查是js調用導致的怎麼處理呢
將不重要的js放在頁面底部。這是非常簡單也是效果很好的優化辦法，將不重要的js全部放到頁面的底部，實現非同步載入，也就是等網頁都載入完了，再載入這些不重要的js，這樣就不影響網頁的速度了。
合並js文件，合並js的目的是減少http的請求，向伺服器請求越少，打開速度越快，而合並多個原本獨立的js文件需要一些技巧。因為js是可關聯型的，可能前面的js代碼中聲明的變數在後面的js代碼中也需要調用，如果順序顛倒，js調用未定義的變數就會出錯，所以js一定要按照順序合並，從上到下，包括js文件及js代碼。
壓縮js代碼
建議使用在線js壓縮完成js代碼的壓縮。需要注意的是js代碼對優化的影響比較大，因為搜索引擎對js代碼抓取有壓力，而且影響網站的打開速度，因此在優化網站時，要盡量減少js代碼的數量和體積，可以採用調用的形式來實現js功能，另外，重要鏈接不要添加在js里。
H. 如何合並壓縮CSS和JS
這位大哥
css是樣式
而JS是腳本
怎麼可以合並壓縮啊？
是不能的
只能寫在外部
在HTML中外部調用
I. JS中如何用r.js對js進行合並和壓縮css文件
呃，用js來壓縮文件？
這個可就復雜了，但首先得理清思路
合並，合並就是將兩個文件的內容合在一起放到一個文件裡面去，js好像還沒這么先進
壓縮，css壓縮其實就是將換行和空格清除，這個js可以做到，但獲取一個文件保存文件，這個js做不到，同上1一樣，沒那麼先進
J. 怎麼合並js
您好，合並js文件目前有兩種方法:
1,手動或者藉助工具將多個js文件合並到一個文件，一般合並後進行壓縮，去掉注釋和多餘的空格和換行。
2，採用先進的伺服器技術，比如淘寶的伺服器可以用一個連接請求多個js文件，如圖：
目前tengine可以支持這種模式！
