如何使用canvas壓縮圖片

這篇文章將為大家詳細講解有關如何使用canvas壓縮圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯公司公司2013年成立，先為瑞麗等服務建站，瑞麗等地企業(yè)，進行企業(yè)商務咨詢服務。為瑞麗企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

使用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 = ()=>{ //要確保圖片已經加載完才進行繪制，不然拿不到圖片元素會繪制出全黑的區(qū)域，就是失敗。
        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壓縮圖片

壓縮后：

如何使用canvas壓縮圖片

關于如何使用canvas壓縮圖片就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：如何使用canvas壓縮圖片
文章網址：http://muchs.cn/article44/pisdee.html

成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站設計、靜態(tài)網站、移動網站建設、App開發(fā)、網站制作、企業(yè)建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

小程序開發(fā)