首頁 > 文章 > web前端 > 使用canvas壓縮圖片的具體步驟

使用canvas壓縮圖片的具體步驟

王林轉載: 2020-10-30 17:13:073217瀏覽

使用canvas壓縮圖片的具體步驟

使用canvas壓縮圖片的步驟：

（影片教學推薦：html影片教學）

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="max-width:90%" id="imgBefore" alt="使用canvas壓縮圖片的具體步驟" >
    <img  src="" id="imgafter" alt="使用canvas壓縮圖片的具體步驟" > //待会压缩完的图片放入这里。
</body>
</html>
<script>
    var img = document.getElementById(&#39;imgBefore&#39;) //拿到图片元素
    img.setAttribute("crossOrigin",&#39;Anonymous&#39;) //这句话并不是必要的，如果你的图片是一个网络链接，
    //那么canvas绘制时可能会报错，是因为跨域的安全性问题。报错时加上就对了。
    img.onload = ()=>{ //要确保图片已经加载完才进行绘制，不然拿不到图片元素会绘制出全黑的区域，就是失败。
        var width = img.width
        var height = img.height
        var canvas = document.createElement(&#39;canvas&#39;);
        var ctx = canvas.getContext(&#39;2d&#39;);
        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(&#39;image/jpeg&#39;,0.2); //第二个参数为压缩的比例，越小越模糊。0-1
        document.getElementById(&#39;imgafter&#39;).src = base64
    }
        
</script>

效果比較：

##壓縮前

使用canvas壓縮圖片的具體步驟

壓縮後：

使用canvas壓縮圖片的具體步驟

#相關推薦：

html教學

以上是使用canvas壓縮圖片的具體步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除

上一篇：html中的三種佈局分別是什麼下一篇：html中的三種佈局分別是什麼

看更多