下面小編就為大家帶來一篇Js利用Canvas實作圖片壓縮功能。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧
最近做的APP專案涉及到手機拍照上傳圖片,因為手機拍照的圖片通常都比較大,所以上傳的時候就會很慢。為此,需要對圖片進行壓縮處理來優化上傳功能。以下是具體實作:
/* * 图片压缩 * img 原始图片 * width 压缩后的宽度 * height 压缩后的高度 * ratio 压缩比率 */ function compress(img, width, height, ratio) { var canvas, ctx, img64; canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); img64 = canvas.toDataURL("image/jpeg", ratio); return img64; }
上面是圖片壓縮函數,傳回 base64 格式的圖片資料。 其中壓縮比率取值(0 - 1 之間)越大圖片品質越高。建議不要將圖片轉為 png 格式,因為轉為 png 格式,圖片的 base64 比轉為 jpeg 的圖片要長不少。以下是實際呼叫:
var image = new Image(); image.src = "/img/test.jpg"; image.onload = function(){ var img64 = compress(image, 500, 400, 0.7); document.getElementById("test").src = img64; }
注意:壓縮方法的呼叫以及圖片src賦值必須放在圖片的onload 方法裡面。因為只有等圖片載入完成後才能進行壓縮處理,進而轉換為base64 來賦值。 如果放在 onload 方法外面,則可能壓縮程式碼無效,或者會產生一張純黑色的圖片。
以上是Js利用Canvas將圖片進行壓縮方法解說的詳細內容。更多資訊請關注PHP中文網其他相關文章!