欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Canvas压缩图片

程序员文章站 2022-03-18 16:36:33
讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩。 步骤: 1.获取img元素,既要压缩的图片 2.创建canvas对象 3.使用canvas的drawImage方法绘制图片 4.通过canvas toDataURl方法获取图像base64编码,设置quality参 ......

讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用canvas实现图片压缩。

 

步骤:

1.获取img元素,既要压缩的图片

2.创建canvas对象

3.使用canvas的drawimage方法绘制图片

4.通过canvas todataurl方法获取图像base64编码,设置quality参数,实现压缩

 

参考示例:

 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas图片压缩测试</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
    <h2>压缩前图片</h2>
    <img id="originalimg" src="test.jpg">
    <h2>压缩后图片</h2>
    <img id="compressedimg" src="">
</div>
<script>
    $(document).ready(function(){
        compressimg(300,0.2)
    });
    function compressimg(width,quality ) {
        // 图片压缩方法,接受2个参数
        // width:压缩后图片宽度,高度按比例计算
        // quality:压缩比例参数,范围0-1
        var img=$("#originalimg")[0];//获取图像元素
        var height=width/img.width*img.height;
        //生成canvas
        var canvas = document.createelement('canvas');
        var ctx = canvas.getcontext('2d');
        canvas.width = width;
        canvas.height = height;
        //通过canvas drawimage方法绘制图片
        ctx.drawimage(img,0,0,width,height);//后四个为位置参数,左上角x,y坐标,右下角x,y坐标
        //通过canvas todataurl方法获取图像base64编码,quality为压缩质量参数,值越小图像越模糊
        var base64 = canvas.todataurl('image/jpeg', quality);
        //测试展示
        $("#compressedimg").attr("src",base64)
        //获取到base64后可做进一步处理,如传到后端并储存
    }
</script>
<style>
    #originalimg{
        width: 300px;
    }
</style>
</body>
</html>

 

压缩前后图片对比:

  使用Canvas压缩图片 

  生成的base64码:

  使用Canvas压缩图片

  能力有限,水平一般,错误之处,欢迎指正,感谢关注和评论!