캔버스를 사용하여 이미지를 압축하는 특정 단계-HTML 튜토리얼-php.cn

캔버스를 사용하여 이미지를 압축하는 특정 단계

王林

풀어 주다： 2020-10-30 17:13:07

앞으로

3223명이 탐색했습니다.

캔버스를 사용하여 이미지를 압축하는 특정 단계

캔버스를 사용하여 이미지를 압축하는 단계:

(추천 비디오 튜토리얼: html 비디오 튜토리얼)

1. 이미지 요소 가져오기

2. 캔버스에 이미지를 그립니다.

4. 캔버스를 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="캔버스를 사용하여 이미지를 압축하는 특정 단계" >
    <img  src="" id="imgafter" alt="캔버스를 사용하여 이미지를 압축하는 특정 단계" > //待会压缩完的图片放入这里。
</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>

로그인 후 복사

효과 비교:

압축 전

캔버스를 사용하여 이미지를 압축하는 특정 단계 압축 후: