讲干货，不啰嗦，当涉及对图片有质量压缩要求的时候，可以使用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. MySQL中表的复制以及大型数据表的备份教程

    MySQL中表的复制以及大型数据表的备份教程     这篇文章主要介绍了MySQL中表的复制以及大型数据表的备份教程,其中大表备份是采用添加触发器增量备份的方法,需要的朋友可以参考下 表复制 mysq ...

  2. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  3. ContextCleaner ——Spark 应用程序的垃圾回收器

    ContextCleaner是一个Spark服务,负责在应用程序范围内清除 shuffles, RDDs, broadcasts, accumulators和checkpointed RDDs,目的是 ...

  4. PAT 甲级 1063 Set Similarity (25 分) （新学，set的使用，printf 输出%，要%%）

    1063 Set Similarity (25 分)   Given two sets of integers, the similarity of the sets is defined to be ...

  5. UIScrollView实现自动循环滚动广告

    实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...

  6. MVC模式实现注册登录

    很多人对MVC模式搞不懂,刚开始是我也犯迷糊,知道看到一个前辈写的代码,我顿时有的恍然大悟,拿来分享给各位 MVC: 就是M:模型.V:视图(前台界面)C:后台处理的servlet 话不多说.上代码 ...

  7. 最新 开创java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.开创等10家互联网公司的校招Offer,因为某些自身原因最终选择了开创.6.7月主要是做系统复习.项目复盘.LeetCode ...

  8. java如何获取当前日期和时间

    System.currentTimeMillis() 获取标准时间可以通过System.currentTimeMillis()方法获取,此方法不受时区影响,得到的结果是时间戳格式的.例如: 15431 ...

  9. python_网络编程_基础

    基本的架构有C/S架构 和B/S架构 B/S架构优于C/S架构? 因为统一入口 , 都是从浏览器开始访问 两台电脑实现通信, 需要网卡, 网卡上有全球唯一的mac地址 ARP协议 #通过ip地址就能找 ...

  10. ant design pro v2 关于用户登录有多个权限的解决方法

    ant design pro V2菜单栏显示流程, 用户输入用户名,密码,登录调用登录接口,校验后返回该用户的权限字段currentAuthority,然后通过调用setAuthority(curre ...