如何使用canvas壓縮圖片-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)絡(luò)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

使用canvas壓縮圖片的步驟：

1、拿到圖片元素

2、繪制一個空白的canvas

3、將圖片繪制在canvas上

4、將canvas轉(zhuǎn)成base64（這里調(diào)用的方法可以實(shí)現(xiàn)壓縮，base64就可以直接放入src或者傳入后端、轉(zhuǎn)成別的格式傳輸?shù)?。?/p>

代碼實(shí)現(xiàn)：

<!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') //這句話并不是必要的，如果你的圖片是一個網(wǎng)絡(luò)鏈接，
    //那么canvas繪制時(shí)可能會報(bào)錯，是因?yàn)榭缬虻陌踩詥栴}。報(bào)錯時(shí)加上就對了。
    img.onload = ()=>{ //要確保圖片已經(jīng)加載完才進(jìn)行繪制，不然拿不到圖片元素會繪制出全黑的區(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);//將圖片繪制進(jìn)去，這里第一個參數(shù)可以接受很多格式，
        //以元素為例子，詳情https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
        var base64 = canvas.toDataURL('image/jpeg',0.2); //第二個參數(shù)為壓縮的比例，越小越模糊。0-1
        document.getElementById('imgafter').src = base64
    }
        
</script>

效果對比：

壓縮前

如何使用canvas壓縮圖片

壓縮后：

如何使用canvas壓縮圖片

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

網(wǎng)站欄目：如何使用canvas壓縮圖片-創(chuàng)新互聯(lián)
文章來源：http://bm7419.com/article8/dpoeip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、域名注冊、外貿(mào)網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、服務(wù)器托管、動態(tài)網(wǎng)站

廣告

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

成都做網(wǎng)站