讲干货，不啰嗦，当涉及对图片有质量压缩要求的时候，可以使用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. ISO/IEC 9899:2011 条款6.2.3——标识符的名字空间

    6.2.3 标识符的名字空间 1.如果一个特定标识符的多个声明在一个翻译单元的任意一点可见,那么语法上下文会区分对不同实体的引用.从而,对于标识符各种不同的类别具有独立的名字空间: ——标签名(通过标 ...

  2. Qt编写Onvif搜索及云台控制工具

    一.前言 这个工具很早以前大概在2013年就想做了,后面杂七杂八的事情一再耽搁,记得当时最初用的是soap类来搜索和解析的,后面发现太大了,每次编译都要等好久,光源码文件加起来都快10MB了,而且函数 ...

  3. git帮助和小结

    获取帮助 想了解 Git 的各式工具该怎么用,可以阅读它们的使用帮助,方法有三: $ git help <verb> $ git <verb> --help $ man git ...

  4. LeetCode_112. Path Sum

    112. Path Sum Easy Given a binary tree and a sum, determine if the tree has a root-to-leaf path such ...

  5. Delphi 中记录类型 给记录指针赋值

    PPersion=^TPersion; TPersion=packed record Name:string; Sex:string; Clasee:string; end; var persion: ...

  6. Django文档

    https://docs.djangoproject.com/zh-hans/2.1/

  7. SQl 2008 如何清除登陆过的服务器名称

    C:\Users\Administrator\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shell\SqlStudio.bin ...

  8. iOS-AVFoundation生成缩略图

    使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...

  9. 判断浏览器是否ie6

    if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { ...

  10. 最新 贝壳找房java校招面经 （含整理过的面试题大全）

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