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

效果对比：

压缩前

压缩后：

相关推荐：html教程

以上就是使用canvas压缩图片的具体步骤的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！