您现在的位置是:首页 > 文章详情

【技术干货】前端工程师看过来!一种Ajax缩放图片上传的办法 !

日期:2016-03-22点击:352
f09a5710a8f560fc0d91589d354fd211b5996585

本文作者:上海驻云开发实施工程师 方舟


以下正文


最近做的应用里面有上传图片的功能,由于图片直接丢进阿里云OSS,所以不想通过服务器端程序来写缩放功能,查了一下找到一篇文章,点我 ,这篇总体步骤来说是OK的,但是里面有好多坑。本来准备把上传的独立一篇写出来的,后来发现太短,加到后面吧。PS:想直接看完整可以用版代码的请直接拖到最下。

首先创建Img并画到Canvas上这一步,他的代码连起来是这样的:


ffec4244fddd9a907f116545247b3be4837b6d0f


但是这样写Canvas里面什么都不会出现,我昨天跟这段代码战斗了小半天,才发现他应该改成:


161ee331903524964795bfaf258ff2712dadba80


这是因为Javascript是异步调用的,正序执行的时候img还没画出来,ctx.drawImage已经调用了,导致什么效果都有。

上面那段代码的最后一句也是个坑,在Chrome,Safari下都报错,其实应该写成:


4443503ac6ad167bdb89c09aea92ad5d08c91520


然后要将Canvas转换成文件来上传,这篇写了这两个方法:


bedad26c1d715303604ce9263cd8fa5aa001e7e7


然而实际上mozGetAsFile只有Firefox支持,所以为了兼容Chrome跟Safari我去查了一下dataurl怎么用。这个原文就找不到了,也被坑了一次,搜索到的前几条好多BlobBuilder的,这玩意不知道什么时候就deprecated了,最新版的Chrome跟Safari都没这类,最终找到了一个ArrayBuffer直接转换blob的代码:


81636c2b723bf5a200c0987b0d37e7393360476c


这段代码在Chrome里面用的毫无问题,但是Safari生成的blob只有十几字节,这明显不科学。MDN Blob 上查到可以直接把ArrayBuffer传到Blob构造函数里面,于是就变成了


92c8afd7c84e27a11b45cc0ecf0011735dce7285


现在圆满了,就剩一个小问题,Chrome下会提示把ArrayBuffer传入Blob构造函数的行为deprecated了。

接下来就是文件上传了,用到了jQuery。


d4924b87dbf254b8b8f52ddaf91ceef92389d4e1


这个没啥坑,有个小问题,按之前的办法生成的Blob拿过来上传的时候在Firefox里面无法显示Progress,应该是Firefox只有上传文件才有prgress事件。

以下是完整可用代码:


3cd526eaeab31c583b564db7e7c7b7d436714fc2


好啦 ~ ~ ~ 本文到这里也就结束啦 ~ 如果还希望了解更多相关知识的话,就赶紧订阅我们吧~每天新鲜干货送上呦 ~

原文链接:https://yq.aliyun.com/articles/8639
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章