大家好,今天来为大家解答前端负责ajax这个问题的一些问题点,包括前端负责ajax也一样很多人还不知道,因此呢,今天就来为大家分析分析,现在让我们一起来看看吧!如果解决了您的问题,还望您关注下本站哦,谢谢~
首先创建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事件。
以下是完整可用代码:
以上是关于前端负责ajax的相关信息,了解更多关于内容请继续关注本站。