在日常的一些项目中会有上传图片之类的接口,如果图片过大了再上传的时候是非常的耗时以及占用资源,在这里就给大家分享一下如何在js中把大的图片压缩成小的图片,我这里的功能是用户点击按钮调用相机或者选择文件后进行压缩的:

直接上代码

  1. /*
  2. 三个参数
  3. file:一个是文件(类型是图片格式),
  4. w:一个是文件压缩的后宽度,宽度越小,字节越小
  5. objDiv:一个是容器或者回调函数
  6. photoCompress()
  7. */
  8. function photoCompress(file,w,objDiv){
  9. var ready=new FileReader();
  10. /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
  11. ready.readAsDataURL(file);
  12. ready.onload=function(){
  13. var re=this.result;
  14. canvasDataURL(re,w,objDiv)
  15. }
  16. }
  17.  
  18. function canvasDataURL(path, obj, callback){
  19. var img = new Image();
  20. img.src = path;
  21. img.onload = function(){
  22. var that = this;
  23. // 默认按比例压缩
  24. var w = that.width,
  25. h = that.height,
  26. scale = w / h;
  27. w = obj.width || w;
  28. h = obj.height || (w / scale);
  29. var quality = 0.7; // 默认图片质量为0.7
  30. //生成canvas
  31. var canvas = document.createElement('canvas');
  32. var ctx = canvas.getContext('2d');
  33. // 创建属性节点
  34. var anw = document.createAttribute("width");
  35. anw.nodeValue = w;
  36. var anh = document.createAttribute("height");
  37. anh.nodeValue = h;
  38. canvas.setAttributeNode(anw);
  39. canvas.setAttributeNode(anh);
  40. ctx.drawImage(that, 0, 0, w, h);
  41. // 图像质量
  42. if(obj.quality && obj.quality <= 1 && obj.quality > 0){
  43. quality = obj.quality;
  44. }
  45. // quality值越小,所绘制出的图像越模糊
  46. var base64 = canvas.toDataURL('image/jpeg', quality);
  47. // 回调函数返回base64的值
  48. callback(base64);
  49. }
  50. }
  51.  
  52. function setImagePreview(e,a) {
  53.  
  54. var fileMsg = e.files[0];
  55. if(fileMsg==null){
  56. return;
  57. }
  58. //文件名
  59. var fileName = fileMsg.name;
  60. //大小 字节
  61. var fileSize = fileMsg.size;
  62.  
  63. /*调用
  64. * fileMsg 是input type="file" 的值
  65. * quality 压缩图片质量 范围是(0-1)
  66. * base64Codes 就是最终压缩成的图片
  67. */
  68. photoCompress(fileMsg, {
  69. quality: 0.3
  70. }, function(base64Codes){
  71. //这里可以一个图片预览 把base64Codes 赋值给img的src即可
  72. });
  73. }

html的写法:

  1. <input class="btn takepicture" type="file" name="img5q" id="img5q" accept="image/*" onchange="javascript:setImagePreview(this,5);"/>

其实图片压缩是很简单的,这里说明一下,如果需要上传到服务器的话,把base64Codes当成一个字符串传到服务器即可,mysql表中对应的字段类型可用用longtext来储存,但是longtext的长度也是有限制的,所以在上传的时候要控制文件大小。

如有需要可以加我Q群【308742428】大家一起讨论技术。

后面会不定时为大家更新文章,敬请期待。

喜欢的朋友可以关注下。
如果对你有帮助,请打赏一下!!!

  

  

base64之js压缩图片的更多相关文章

  1. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  2. JS压缩图片(canvas),返回base64码

    上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...

  3. file上传图片,base64转换、压缩图片、预览图片、将图片旋转到正确的角度

    /** * 将base64转换为文件对象 * (即用文件上传输入框上传文件得到的对象) * @param {String} base64 base64字符串 */ function convertBa ...

  4. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  5. js 压缩图片(只缩小体积,不更改图片尺寸)

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  6. js 压缩图片 上传

    感谢,参考了以下作者的绝大部分内容 https://blog.csdn.net/tangxiujiang/article/details/78755292 https://blog.csdn.net/ ...

  7. 了解JS压缩图片,这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

  8. HTML5 JS 压缩图片,并取得图片的BASE64编码上传

    基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...

  9. js压缩图片并上传,不失真,保证图片清晰度

    <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. ubuntu 18.04配置静态ip,解决无法上网问题,解决resolv.conf配置文件被覆盖

    Netplan 是 Ubuntu 17.10 中引入的一种新的命令行网络配置实用程序,用于在 Ubuntu 系统中轻松管理和配置网络设置. 它允许您使用 YAML 格式的描述文件来抽像化定义网络接口的 ...

  2. GUI学习之十——QFrame和的QAbstractScrollArea学习总结

    上一章我们学习了单行的文本框QLineEdit类,下面我们要为多行的文本框的学习坐下准备,总结一下QFrame类和QAbstractScrollArea类 一.QFrame类 1.描述 QFrame的 ...

  3. SQL SERVER 如何把1列多行数据 合并成一列显示

    示例 修改前:1列多行数据 修改后:合并成一列 示例语句 1 2 3 4 5 6 7 8 9 10 11 select 类别,     名称 = (         stuff(            ...

  4. STS中applicationContext.xml配置文件

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  5. Cookie随笔

    解决了服务器不能识别不同浏览器的问题,相当于给每个浏览器加了个“身份证”. Cookie首先由服务器创建发给浏览器,随后浏览器每次访问服务器时都带上这个Cookie. Cookie缺点: ·Cooki ...

  6. Eclipse 安装 AmaterasUML 插件

    网上很多Eclipse 安装UML插件教程,可能对高版本Eclipse都无法安装成功,本文提供的安装方式,亲测可用. 一.安装GEF插件 1.打开eclipse官网 https://www.eclip ...

  7. 使用kbmmw中的随机数替换delphi 10.3 自带的随机数

    我们在开发中经常会使用随机数模拟各种随机条件,例如生成唯一的密码和令牌. 在计算机中,一般采用PRNG(伪随机序列发生器)模拟真实随机数.既然是随机,就要要没有任何规律, 在取值范围内均匀.独立.以确 ...

  8. Java基础之一

    移位操作符 移位操作符只可用来处理整数类型. <<:左移位操作符,按照操作符右侧指定的位数将操作符左边的操作数向左移动,在低位补0. >>:“有符号”右移位操作符,按照操作符右 ...

  9. 获取mp3文件的采样率

    /** * 获取mp3文件的采样率 * @param filefullname 文件完整路径 * @return 采样率 */public int getMp3SampleRate(String fi ...

  10. nginx报错:./configure: error: C compiler cc is not found, gcc 是已经安装了的

    源码安装nginx报错,找不到gcc,但是实际上gcc是存在的,如下: # ./configure checking for OS + Linux -.el7.x86_64 x86_64 checki ...