溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用canvas壓縮圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
使用canvas壓縮圖片的步驟：
1、拿到圖片元素
2、繪制一個空白的canvas
3、將圖片繪制在canvas上
4、將canvas轉成base64（這里調用的方法可以實現壓縮，base64就可以直接放入src或者傳入后端、轉成別的格式傳輸等。）
代碼實現：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="test.png" style="width: 200px; height: 400px;" id="imgBefore">
<img src="" id="imgafter"> //待會壓縮完的圖片放入這里。
</body>
</html>
<script>
var img = document.getElementById('imgBefore') //拿到圖片元素
img.setAttribute("crossOrigin",'Anonymous') //這句話并不是必要的，如果你的圖片是一個網絡鏈接，
//那么canvas繪制時可能會報錯，是因為跨域的安全性問題。報錯時加上就對了。
img.onload = ()=>{ //要確保圖片已經加載完才進行繪制，不然拿不到圖片元素會繪制出全黑的區域，就是失敗。
var width = img.width
var height = img.height
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height; //以上幾步都在繪制一個canvas
ctx.drawImage(img,0,0,width,height);//將圖片繪制進去，這里第一個參數可以接受很多格式，
//以元素為例子，詳情https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
var base64 = canvas.toDataURL('image/jpeg',0.2); //第二個參數為壓縮的比例，越小越模糊。0-1
document.getElementById('imgafter').src = base64
}
</script>效果對比：
壓縮前
壓縮后：
關于如何使用canvas壓縮圖片就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
