Maison > Article > interface Web > Étapes spécifiques pour utiliser Canvas pour compresser des images

Étapes spécifiques pour utiliser Canvas pour compresser des images

王林avant: 2020-10-30 17:13:073192parcourir

Étapes pour utiliser Canvas pour compresser des images :

(Tutoriel vidéo recommandé : Tutoriel vidéo HTML)

1. Élément d'image

2. Dessinez une toile vierge

3. Dessinez l'image sur la toile

4. Convertissez la toile en base64 (la méthode appelée ici peut réaliser la compression, base64 peut. être directement mis dans src ou transmis au backend, converti dans d'autres formats pour la transmission, etc.)

Implémentation du code :

<!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="Étapes spécifiques pour utiliser Canvas pour compresser des images" >
    <img  src="" id="imgafter" alt="Étapes spécifiques pour utiliser Canvas pour compresser des images" > //待会压缩完的图片放入这里。
</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>

Comparaison des effets :

Avant la compression <.>

Étapes spécifiques pour utiliser Canvas pour compresser des images

Après compression :

Étapes spécifiques pour utiliser Canvas pour compresser des images

Recommandations associées :

Tutoriel HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelles sont les trois mises en page en HTML ?Article suivant：Quelles sont les trois mises en page en HTML ?

Articles Liés

Voir plus