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的按鈕來取得本機檔案。

<!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // 用來顯示圖片輸出結果，或錯誤提示if(/image/.test(file.type)){ // 判斷檔案類型是否為圖片//… }else{ result.innerHTML = '<span style=color: red;>檔案類型有誤！ </span>';}

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(){ // … };};

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);

<!--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武林網。