讲干货，不啰嗦，当涉及对图片有质量压缩要求的时候，可以使用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. Qt编写自定义控件46-树状导航栏

    一.前言 树状导航栏控件是所有控件中最牛逼最经典最厉害的一个,在很多购买者中,使用频率也是最高,因为该导航控件集合了非常多的展示效果,比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等,全部涵 ...

  2. win7下docker环境安装

    最近公司涉及到对docker容器引擎的使用,所以就在网上各种搜索,由于是win7系统,所以在使用上更是麻烦,遇到各种错误就是无法成功启动docker,经过两天的各种尝试下,终于安装成功,在此记录一下使 ...

  3. Eclipse导入Spring Boot项目后pom.xml出现红叉的解决办法

    胸怀难的问题是:程序能正常运行,但是pom.xml下面有一个红叉. 解决办法: 右键项目 --> Update project...

  4. iOS技术面试08：其他

    1 客户端安全性处理方式? 1> 网络数据传输(敏感数据[账号\密码\消费数据\银行卡账号], 不能明文发送) 2> 协议的问题(自定义协议, 游戏代练) 3> 本地文件存储(游戏的 ...

  5. jenkins的slave/agent如何通过tcp端口和master建立连接

    Jenkins是master-slave/agent结构,可以通过代理把任务下发到各个agent/slave上去执行 如图,首先在master上开启代理配置,指定master上开启的tcp端口,以及和 ...

  6. 使用ASP.NET Core支持GraphQL( restful 配套)

    https://github.com/graphql-dotnet https://github.com/graphql GraphQL简介 官网:https://graphql.cn/code/ 下 ...

  7. 聊聊Docker理论知识(二)

    目录 一.什么是Dcoker 二.Docker的三大核心概念 1.镜像(Image) 2.容器(Container) 3.仓库(Repository) 三.Docker架构组成 四.Docker的技术 ...

  8. Spring 分布式事务详解

    在学习分布式事务的过程中会遇到以下关键名词: 相关名词: XA :XA规范的目的是允许多个资源(如数据库,应用服务器,消息队列,等等)在同一事务中访问,这样可以使ACID属性跨越应用程序而保持有效.X ...

  9. angular入门 - 环境安装及项目创建

    1.安装node.js 下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本) 下载地址:https://nodejs.org/en/downloa ...

  10. 日常工作问题解决：rhel7下使用teamd配置双网卡绑定

    目录 1.情景描述 2.准备工作 2.1 确认网卡信息 2.2 删除原有网卡配置信息 3.配置网卡绑定 3.1 配置千兆网卡双网卡热备用作心跳 3.2 配置网兆网卡双网卡负载均衡用作业务 1.情景描述 ...