【技术干货】前端工程师看过来!一种Ajax缩放图片上传的办法 !
本文作者:上海驻云开发实施工程师 方舟
以下正文
最近做的应用里面有上传图片的功能,由于图片直接丢进阿里云OSS,所以不想通过服务器端程序来写缩放功能,查了一下找到一篇文章,点我 ,这篇总体步骤来说是OK的,但是里面有好多坑。本来准备把上传的独立一篇写出来的,后来发现太短,加到后面吧。PS:想直接看完整可以用版代码的请直接拖到最下。
首先创建Img并画到Canvas上这一步,他的代码连起来是这样的:
但是这样写Canvas里面什么都不会出现,我昨天跟这段代码战斗了小半天,才发现他应该改成:
这是因为Javascript是异步调用的,正序执行的时候img还没画出来,ctx.drawImage已经调用了,导致什么效果都有。
上面那段代码的最后一句也是个坑,在Chrome,Safari下都报错,其实应该写成:
然后要将Canvas转换成文件来上传,这篇写了这两个方法:
然而实际上mozGetAsFile只有Firefox支持,所以为了兼容Chrome跟Safari我去查了一下dataurl怎么用。这个原文就找不到了,也被坑了一次,搜索到的前几条好多BlobBuilder的,这玩意不知道什么时候就deprecated了,最新版的Chrome跟Safari都没这类,最终找到了一个ArrayBuffer直接转换blob的代码:
这段代码在Chrome里面用的毫无问题,但是Safari生成的blob只有十几字节,这明显不科学。MDN Blob 上查到可以直接把ArrayBuffer传到Blob构造函数里面,于是就变成了
现在圆满了,就剩一个小问题,Chrome下会提示把ArrayBuffer传入Blob构造函数的行为deprecated了。
接下来就是文件上传了,用到了jQuery。
这个没啥坑,有个小问题,按之前的办法生成的Blob拿过来上传的时候在Firefox里面无法显示Progress,应该是Firefox只有上传文件才有prgress事件。
以下是完整可用代码:
好啦 ~ ~ ~ 本文到这里也就结束啦 ~ 如果还希望了解更多相关知识的话,就赶紧订阅我们吧~每天新鲜干货送上呦 ~
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
一个小时玩转阿里云 | 免费的自助实验平台上线了
告诉同学们一个好消息,阿里云的自助实验正式上线了 阿里云的自助实验课为同学们提供了一个真实的阿里云操作环境,你可以通过自助实验课中提供的各种小型实验, 快速掌握包括ECS、RDS等云产品的使用与操作。最重要的是这不是一个视频教学或帮助手册,而是完全实战的、 可以直接操作真实阿里云产品的实验平台。自助实验现在免费体验,活动截止时间3月底,想免费学要快哦! 看看一个励志于学习阿里云的女同学在使用自助实验后的变化吧~ 同学们可以按照以下步骤快速开启学习模式,也可以直接登陆www.aliyunedu.net进入实验环境。 目前自助实验已经上线了13门课程,下面是我们推荐的实验,我们的培训师们还在加速开发更多的课程。 ECS的磁盘挂载、快照及自定义镜像 通过ECS实现磁盘的挂载分区,快照和自定义镜像的使用。 RDS的数据备份和恢复 本实验首先需要在RDS实例中创建账号和数据库,然后将本地的一个sql文件导入到数据库中。 数据库上云迁移的实现 模拟真实场景,解决数据库上云迁移问题 使用阿里云快速搭建论坛网站 使用ECS、RDS和OSS搭建一个Phpwind网站,并使用RDS作为数据库,OSS作...
- 下一篇
【运维必读】在云计算时代,这是系统运维都需要的产品!
云计算时代到来了,大家都习惯了通过在线购买服务器或数据库的方式来构建公司的整个互联网服务或者IT服务,大家很轻松的便通过云计算服务商的控制面板,很容易的就获得了最终服务器的访问权,可以很容易的对虚拟服务器,数据库等计算节点方便的操作。 但是这往往也隐藏着很多管理上的危险,即公司中每个人可能都是通过互联网在管理服务器的,作为管理者的你可能并不知道管理员是来自哪里,是不是真的是公司的成员。其次,每个人到底在服务器上做了什么操作,哪些操作可能是危险操作,包括是否有人可能正将服务器中的重要数据向外搬运,你也不知道。 这个时候,碉堡云这款产品就是每一个使用云计算公司所必须的产品了。 首先,这一款Saas化的产品,其设计和传统的软件相比,最大的特点就是简单易用。但简单易用并不意味着功能弱。实际上这是一款非常强大的软件。碉堡云可以支持Linux,Windows及Mysql的操作审计,远程监控等功能,你无须特别的管理工具,仍然可以通过对应的软件客户端来操作服务器或数据库如SSHClient或Mysql的各种客户端,同时针对数据库,还有特别强大的误操作阻断功能。比如当DBA在连接到数据库执行一个删...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Hadoop3单机部署,实现最简伪集群
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果