之前寫過一篇有關Canvas圖片處理的文章,今天我們要來講如何使用Canvas來壓縮圖片。
Canvas圖片壓縮流程接下來我將以具體實例為大家講解Canvas圖片壓縮的具體流程。
一、本地圖片輸入1. 取得本地文件
<!--HTML--><input type=file id=choose-img />
// JSvar chooseImg = document.getElementById(choose-img);chooseImg.onchange = function(e){ var file = this.files[0]; // …(省略部分程式碼後續依序展示,下同)};很簡單,就是透過type類型為file的按鈕來取得本機檔案。
2. 判斷所取得的本機檔案類型<!--HTML--><div id=result></div>
// JSvar result = document.getElementById(result); // 用來顯示圖片輸出結果,或錯誤提示if(/image/.test(file.type)){ // 判斷檔案類型是否為圖片//… }else{ result.innerHTML = '<span style=color: red;>檔案類型有誤! </span>';} 3. 將所取得的本機圖片以base64格式輸出var img = new Image(), // 建立圖片對象,用於放置原始圖片reader = new FileReader();reader.readAsDataURL(file); // 以base64格式讀取並存入FileReader對象的result屬性中reader .onload = function(){ img.src = this.result; //將圖片base64字串直接賦予Image物件的src中document.body.insertBefore(img,chooseImg); // 將輸出的圖片插入到檔案按鈕之前img.onload = function(){ // … };};二、在Canvas畫布中繪製圖片1. 創建畫布var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');注意:畫布大小與所輸入圖片寬高相同。
2. 繪製圖片context.drawImage(img,0,0,canvas.width,canvas.height);三、壓縮圖片並輸出
<!--HTML-->圖片壓縮比率: <input id=rate type=number min=0 max=100 /> %
// JSvar rate = document.getElementById(rate).value || 100; // 輸入圖片壓縮比率,預設為100%var imgUrl = canvas.toDataURL(file.type,rate/100); // 第一個參數為輸出圖片類型,第二個為壓縮比result.innerHTML = '壓縮後:<img src='+ imgUrl +' />'; //將壓縮後的圖片置於result中顯示img.style.display = 'none'; // 將原圖隱藏
將在Canvas畫布中所繪製的圖片再次以base64格式輸出。
四、完整程式碼展示<!--HTML-->圖片壓縮比率: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >
// JSvar chooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; if(/image/.test( file.type)){ var img = new Image(), reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement(' canvas'); canvas.width = img.clientWidth; canvas.height = img.clientHeight; var context = canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || 100; var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = '壓縮後:<img src='+ imgUrl +' />'; result.style.display = 'block'; img.style.display = 'none'; }; }; } else{ result. innerHTML = '<span style=color: red;>檔案類型有誤! </span>'; }};經測試發現,透過Canvas壓縮JPEG格式圖片效果最佳,PNG壓縮效果不明顯,有時反而變大。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。