在通过js对要上传图片进行压缩时,我利用的是html5中的canvas元素进行辅助,具体思路如下:

var reader = new FileReader();//files[0]对象是从input type=file中获取的file对象reader.readAsDataURL(files[0]);//将file对象base64转码成功后进入reader.onload = function () {//声明img标签,并将未压缩的图片赋值给src属性var image = $('<img/>');image.attr('src', this.result);image.on('load', function () {//定义canvas的宽、高为72pxvar square = 72;var canvas = document.createElement('canvas');canvas.width = square;canvas.height = square;var context = canvas.getContext('2d');context.clearRect(0, 0, square, square);var imageWidth;var imageHeight;var offsetX = 0;var offsetY = 0;//判断是根据原图片的宽压缩还是高压缩if (this.width > this.height) {imageWidth = Math.round(square * this.width / this.height);imageHeight = square;offsetX = - Math.round((imageWidth - square) / 2);} else {imageHeight = Math.round(square * this.height / this.width);imageWidth = square;offsetY = - Math.round((imageHeight - square) / 2);}context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);//data即为压缩为72x72的压缩图片的base64内容var data = canvas.toDataURL('image/jpeg');});};

当图片经过base64转码后获得的字符串是可以被当作图片使用,如:

data:image/jpeg;base64,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

jQuery实现对file对象的压缩相关推荐

  1. jquery实现对radio赋值

    作者:yan jquery实现对radio赋值,如下: 方法1.$("#form_div input[name="+name+"]").val([value]) ...

  2. java实现对pdf文件压缩,拆分,修改水印,添加水印

    最近要实现一个文件上传,并且在线预览上传文件的功能,设计思路是:把上传的文件通过openoffice转成pdf文件,并将pdf文件以流的形式返回到浏览器,由于上传的部分文件过大,转成pdf后传回前端浏 ...

  3. Qt实现对json文件的解析

    json是一种轻量级的数据结构,其内部的结构是一种键值对(key-value)的组合,最外层是{ }.key是带双引号的字符串常亮,用于获取和存储:value的值可以是bool变量,字符串常量,对象或 ...

  4. 使用RootTools实现对Android系统文件的读写

    使用RootTools实现对Android系统文件的读写  作者:          蒋东国  时间:     2016年11月2日 星期三  应用来源:     hqt APP(测试机型:华为荣耀4 ...

  5. 【五一创作】使用Scala二次开发Spark3.3.0实现对MySQL的upsert操作

    使用Scala二次开发Spark实现对MySQL的upsert操作 背景 在我们的数仓升级项目中,遇到了这样的场景:古人开发的任务是使用DataStage运算后,按照主键[或者多个字段拼接的唯一键]来 ...

  6. python对word文档内容进行批量替换_python 使用win32com实现对word文档批量替换页眉页脚...

    最近由于工作需要,需要将70个word文件的页眉页脚全部进行修改,在想到这个无聊/重复/没有任何技术含量的工作时,我的内心是相当奔溃的.就在我接近奔溃的时候我突然想到完全可以用python脚本来实现这 ...

  7. 用Python脚本实现对Linux服务器的监控

    一.前言 二.概述 三.Python 版本说明 四./proc 文件系统 五.对CPU监测 六.对系统负载监测 七.对内存信息的获取 八.对网络接口的监测 九.监控apache服务器进程的Python ...

  8. 用 Python 脚本实现对 Linux 服务器的监控

    版本说明 Linux 服务器是 Ubuntu 12.10 Python 版本 是 2.7 工作原理:基于/proc 文件系统 Linux 系统为管理员提供了非常好的方法,使其可以在系统运行时更改内核, ...

  9. java实现对rar文件和zip文件的解压缩

    java实现对rar文件和zip文件的解压缩 一.对zip文件的解压缩 1.1 使用ZIP4J实现 zip4j官方说明: Create, Add, Extract, Update, Remove fi ...

最新文章

  1. docker pull拉取镜像_docker拉取镜像失败解决
  2. “产教融合新范式,校企聚力新实践”——2018杭州云栖大会大学合作专场论坛成功举办...
  3. C#23种开发模式,陆续完善中
  4. 与python相关的爬虫工具_python爬虫常用工具集合
  5. 正确理解HTML,XHTML页面的头部doctype定义
  6. CV2摄像头人脸、人眼、微笑等检测
  7. 加油站都需要什么手续_农村买房过户都需要什么手续?
  8. 应付账款账龄分析模板_企业财务报表分析论文应如何着手?
  9. RabbitMq学习笔记006---修改RabbitMq端口号和心跳时间
  10. Tensorflow 2.0 打印 Tensor
  11. 简书bug:不支持复制粘贴纯文本
  12. 虚拟IP技术-VIP 与 负载均衡
  13. php判断电话号码是否为空号,如何批量检测手机号码是否为空号、无效号码?
  14. AKKA:大数据下的并发编程模型
  15. 中国象棋(人机博弈)
  16. 中国AI专利数稳居第一!世界各国AI专利深度盘点
  17. jd-gui反编译中文乱码
  18. 芯片Timing sign-off Corner理解
  19. “天天向上“py代码
  20. 小草手把手教你 LabVIEW 串口仪器控制——VISA 串口配置

热门文章

  1. 来认识一下四大主流接口VGA、DVI、HDMI、DP基础知识详解
  2. SWO引脚配置覆盖, 导致ITM信息打印失效
  3. Unity基础:图片根据文字内容自适应大小(ContentSizeFitter的使用小技巧)
  4. 与其他数据库相比,MySQL的特点
  5. Python Day3 continue
  6. 快能通学生计算机怎么玩游戏规则,无聊的教室游戏攻略大全 新手快速通关技巧汇总[多图]...
  7. 路由器上的一些常见端口
  8. 维克森林大学计算机科学专业好不好,美国维克森林大学计算机科学硕士专业介绍...
  9. java课程设计斗地主_Java课程设计---web版斗地主
  10. 自动化持续集成_为人民自动化,选择持续集成服务器