Js利用Canvas實現(xiàn)圖片壓縮功能
更新時間：2017年09月13日 07:51:04 作者：similar
下面小編就為大家?guī)硪黄狫s利用Canvas實現(xiàn)圖片壓縮功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近做的APP項目涉及到手機(jī)拍照上傳圖片，因為手機(jī)拍照的圖片通常都比較大，所以上傳的時候就會很慢。為此，需要對圖片進(jìn)行壓縮處理來優(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 之間）越大圖片質(zhì)量越高。建議不要將圖片轉(zhuǎn)為 png 格式，因為轉(zhuǎn)為 png 格式，圖片的 base64 比轉(zhuǎn)為 jpeg 的要長不少。下面是實際調(diào)用：
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;
}
注意： 壓縮方法的調(diào)用以及圖片src賦值必須放在圖片的 onload 方法里面。因為只有等圖片加載完成后才能進(jìn)行壓縮處理，從而轉(zhuǎn)換為base64 進(jìn)行賦值。 如果放在 onload 方法外面，則可能壓縮代碼無效，或者會生成一張純黑色的圖片。
以上這篇Js利用Canvas實現(xiàn)圖片壓縮功能就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
那時候在群里討論的，吸納很多人的方法與意見，修改而成的2008-10-10
JS中利用FileReader實現(xiàn)上傳圖片前本地預(yù)覽功能
FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容,使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。下面通過本文給大家介紹JS中利用FileReader實現(xiàn)上傳圖片前本地預(yù)覽功能，需要的朋友參考下2018-03-03
基于JavaScript實現(xiàn)頁面輪播圖漸變效果的示例代碼
這篇文章主要給大家分享如何使用JavaScript實現(xiàn)一個頁面輪播圖漸變效果,輪播圖是網(wǎng)頁開發(fā)中常見的功能之一,它能夠展示多個圖片或內(nèi)容,并以一定的時間間隔進(jìn)行自動切換,而通過添加漸變效果,可以讓切換過程更加平滑流暢,感興趣的小伙伴可以自己動手嘗試一下2023-10-10
JavaScript中while循環(huán)的基礎(chǔ)使用教程
這篇文章主要給大家介紹了關(guān)于JavaScript中while循環(huán)的基礎(chǔ)使用教程，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要為大家介紹了JS中Require與Import 區(qū)別對比分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
下面小編就為大家分享一篇解決Webpack 熱部署檢測不到文件變化的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了如何使用?JS?判斷用戶是否處于活躍狀態(tài),案例演示了如何獲取用戶活躍狀態(tài),時間閾值定為5秒,超出該閾值沒有操作表示非活躍,否則屬于正在活躍中,需要的朋友可以參考下2024-05-05
實現(xiàn)ajax之前必須要創(chuàng)建一個 XMLHttpRequest 對象。這是必須的。那么對使用js實現(xiàn)ajax的代碼感興趣的朋友可以參考下本文2016-05-05
javascript密碼強(qiáng)度校驗代碼（兩種方法）
為了保證網(wǎng)站個人信息的安全，很多網(wǎng)站在注冊頁面都設(shè)置密碼強(qiáng)度這項，用javascript如何實現(xiàn)密碼強(qiáng)度校驗代碼呢？下面小編給大家整理了兩種方法使用javascript密碼強(qiáng)度校驗代碼，有需要的朋友可以參考下2015-08-08
對應(yīng)用到對textarea處理的朋友可以參考下?？刂频谋容^不錯的代碼封裝。2010-11-11