讲干货，不啰嗦，当涉及对图片有质量压缩要求的时候，可以使用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>

压缩前后图片对比：

　　

　　生成的base64码：

　　

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

使用Canvas压缩图片的更多相关文章

  1. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  2. vue上传图片 base64+canvas压缩图片

    这是先将图片 base64转码 在拿canvas压缩的

  3. canvas压缩图片

    1.canvas.toDataUrl压缩图片 canvas的toDataUrl方法可以将内容导出为base64编码格式的图片,采用base64编码将比源文件大1/3,但是该方法可以指定导出图片质量,所 ...

  4. 使用canvas压缩图片 并上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. canvas压缩图片变模糊问题

    canvas 画图图片变模糊问题 问题描述 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了 canvas 画图线条变粗 问题产生原因 该问题在 PC 下面并不会产生,原因 ...

  6. js canvas压缩图片上传

    $('input[type="file"]').on('change',function(){ var files = !!this.files ? this.files : [] ...

  7. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

  8. canvas 压缩图片的大小

    使用 signature_pad canvas 库生成的图片太大.但又没有提供方法来压缩. 当然这是根据你canvas的画布大小决定的,某些原因导致我的画布就得是那么大. 随随便便一个图片转化为bas ...

  9. js canvas压缩图片和jQuery ajax上传图片简单demo

    原来用的插件,里面东西太乱了,一会jq,一会原生js,本来原生js就不熟,看起来更难受,而且感觉好多东西都是没用的,而且后端php转存文件一直不是很熟悉,正好一起整理一下.就是很简单的一个demo,如 ...

随机推荐

  1. Python - celery 相关报错 - AttributeError: type object '_multiprocessing.win32' has no attribute 'WAIT_OBJECT_0'

    报错场景 执行   celery worker -A tasks -l INFO  打开 worker 的时候报错无法进行 报错解决 Celery 的版本过高, 进行降级处理即可 pip instal ...

  2. IFC数据模型构件控制

    控制ifc构件的隐藏与显示.着色 osg::ref_ptr<osg::Geode> geode1 = new osg::Geode(); osg::ref_ptr<osg::Stat ...

  3. Spring Cloud Eureka集群部署到Linux环境

    还是三板斧:先改配置文件,支持集群,然后出包,上传到linux环境(3个节点),最后启动jar包跑起来. 1.在原eureka服务端代码(参见Greenwich.SR2版本的Spring Cloud ...

  4. Qt编写自定义控件54-时钟仪表盘

    一.前言 这个控件没有太多的应用场景,主要就是练手,论美观的话比不上之前发过的一个图片时钟控件,所以此控件也是作为一个基础的绘制demo出现在Qt源码中,我们可以在Qt的安装目录下找到一个时钟控件的绘 ...

  5. LVS的调度算法介绍

    1.轮询调度(rr) 轮询调度(Round Robin 简称'RR')算法就是按依次循环的方式将请求调度到不同的服务器上,该算法最大的特点就是实现简单.轮询算法假设所有的服务器处理请求的能力都一样的, ...

  6. sbt配置文件

    # Set the java args to high -Xmx512M -XX:MaxPermSize=256m -XX:ReservedCodeCacheSize=128m # Set the e ...

  7. ubuntu18.04开机提示welcome to emergency mode! after logging in type...的解决办法

    开机就是报错,进不了系统. 原因是我的ubuntu电脑绑定了之前的移动硬盘,而我开机的时候并没有插着移动硬盘. 所以解决办法是,在此命令行下,以root用户的身份(我这里默认是root用户),vim ...

  8. 【c# 学习笔记】密封类

    密封类不可以被另外一个类继承,如果强行在代码中继承一个密封类,编译时就会产生错误. c#使用sealed关键字来定义密封类,如下: //定义密封类 public sealed class Sealed ...

  9. vim学习一

    来源 实验楼(shiyanlou.com)的<Vim编辑器>课程的学习报告. 6种基本模式 普通模式 默认进入vi时的模式,使用编辑器命令,i h j k l 等等 插入模式 用户按下 i ...

  10. 逆天的flexbox布局

    Flexbox是spankin新推出的一种CSS布局模块,拥有完美的浏览器兼容性!它可以轻易做到垂直居中.重新排序.布局的动态伸展与收缩. Flexbox兼容性参考 点击查看基本教程介绍(请用电脑上的 ...