Heim > Artikel > Web-Frontend > Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern

Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern

王林nach vorne: 2020-10-30 17:13:073190Durchsuche

Schritte zur Verwendung der Leinwand zum Komprimieren von Bildern:

(Empfohlenes Video-Tutorial: HTML-Video-Tutorial)

1. Zeichnen Sie eine leere Leinwand

4. Canvas in Base64 konvertieren (die hier aufgerufene Methode kann eine Komprimierung erreichen, und Base64 kann direkt in src eingefügt oder an das Backend übergeben, zur Übertragung in andere Formate konvertiert werden usw.)

Code-Implementierung:

<!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="Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern" >
    <img  src="" id="imgafter" alt="Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern" > //待会压缩完的图片放入这里。
</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>

Effekt Vergleich:

Vor der Komprimierung

Nach der Komprimierung: Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern

Verwandte Empfehlungen: Spezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern HTML-Tutorial

Das obige ist der detaillierte Inhalt vonSpezifische Schritte zur Verwendung von Canvas zum Komprimieren von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Welche drei Layouts gibt es in HTML?Nächster Artikel：Welche drei Layouts gibt es in HTML?

In Verbindung stehende Artikel

Mehr sehen