집 > 기사 > 웹 프론트엔드 > 캔버스를 사용하여 이미지를 압축하는 특정 단계

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

王林앞으로: 2020-10-30 17:13:073190검색

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

(추천 비디오 튜토리얼: 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>

효과 비교:

압축 전

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

캔버스를 사용하여 이미지를 압축하는 특정 단계 관련 권장 사항:

html 튜토리얼

위 내용은 캔버스를 사용하여 이미지를 압축하는 특정 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：HTML의 세 가지 레이아웃은 무엇입니까?다음 기사：HTML의 세 가지 레이아웃은 무엇입니까?