Js利用Canvas實現(xiàn)圖片壓縮功能

更新時間：2017年09月13日 07:51:04 作者：similar

下面小編就為大家?guī)硪黄狫s利用Canvas實現(xiàn)圖片壓縮功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近做的APP項目涉及到手機拍照上傳圖片，因為手機拍照的圖片通常都比較大，所以上傳的時候就會很慢。為此，需要對圖片進行壓縮處理來優(yōu)化上傳功能。以下是具體實現(xiàn)：

/* 
 * 圖片壓縮
 * 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;
 }

上面是一個圖片壓縮函數(shù)，返回 base64 格式的圖片數(shù)據(jù)。其中壓縮比率取值（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實現(xiàn)圖片壓縮功能就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js快速與任意QQ號碼建立臨時對話
那時候在群里討論的，吸納很多人的方法與意見，修改而成的
2008-10-10
JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能
FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家介紹JS中利用FileReader實現(xiàn)上傳圖片前本地預覽功能，需要的朋友參考下
2018-03-03
基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實現(xiàn)一個頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個圖片或內容,并以一定的時間間隔進行自動切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動手嘗試一下
2023-10-10
JavaScript中while循環(huán)的基礎使用教程
這篇文章主要給大家介紹了關于JavaScript中while循環(huán)的基礎使用教程，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2020-08-08
JS中Require與Import 區(qū)別對比分析
這篇文章主要為大家介紹了JS中Require與Import 區(qū)別對比分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
解決Webpack 熱部署檢測不到文件變化的問題
下面小編就為大家分享一篇解決Webpack 熱部署檢測不到文件變化的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
使用?JS?判斷用戶是否處于活躍狀態(tài)的案例詳解
這篇文章主要介紹了如何使用?JS?判斷用戶是否處于活躍狀態(tài),案例演示了如何獲取用戶活躍狀態(tài),時間閾值定為5秒,超出該閾值沒有操作表示非活躍,否則屬于正在活躍中,需要的朋友可以參考下
2024-05-05
使用JavaScript實現(xiàn)ajax的實例代碼
實現(xiàn)ajax之前必須要創(chuàng)建一個 XMLHttpRequest 對象。這是必須的。那么對使用js實現(xiàn)ajax的代碼感興趣的朋友可以參考下本文
2016-05-05
javascript密碼強度校驗代碼（兩種方法）
為了保證網(wǎng)站個人信息的安全，很多網(wǎng)站在注冊頁面都設置密碼強度這項，用javascript如何實現(xiàn)密碼強度校驗代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強度校驗代碼，有需要的朋友可以參考下
2015-08-08
js封裝的textarea操作方法集合(兼容很好)
對應用到對textarea處理的朋友可以參考下?？刂频谋容^不錯的代碼封裝。
2010-11-11