我一直在尝试重新实现像一个on the Mozilla Hacks网站的HTML5图像上传器,但它适用于WebKit浏览器 . 部分任务是从 canvas
对象中提取图像文件,并将其附加到FormData对象以进行上载 .
问题是,虽然 canvas
具有 toDataURL
函数来返回图像文件的表示,但FormData对象仅接受来自File API的文件或Blob对象 .
Mozilla解决方案在 canvas
上使用了以下仅限Firefox的功能:
var file = canvas.mozGetAsFile("foo.png");
...在WebKit浏览器上不可用 . 我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象,我认为它可能是File API的一部分,但我不能为我的生活找到一些东西 .
可能吗?如果没有,任何替代方案?
谢谢 .
14 回答
通过更改最后一行以适应Blob,Stoive的原始答案很容易解决:
现在不推荐使用BlobBuilder和ArrayBuffer,这是使用Blob构造函数更新的顶级注释代码:
我的首选方式是canvas.toBlob()
但无论如何这里是使用fetch ^^将base64转换为blob的另一种方法,
简单说明:D
可以在没有try catch的情况下使用 .
感谢check_ca . 做得好 .
在玩了几件事之后,我设法自己解决了这个问题 .
首先,这会将dataURI转换为Blob:
从那里,将数据附加到表单以便将其作为文件上载很容易:
感谢@Stoive和@ vava720我以这种方式结合了两者,避免使用不推荐使用的BlobBuilder和ArrayBuffer
这是Stoive's answer的ES6版本:
用法:
不断发展的标准似乎是canvas.toBlob()而不是像Mozilla猜测的canvas.getAsFile() .
我没有看到任何支持它的浏览器:(
谢谢你这个伟大的线程!
此外,任何尝试接受答案的人都应该小心使用BlobBuilder,因为我发现支持受到限制(和命名空间):
你在BlobBuilder上使用另一个库的polyfill吗?
toDataURL为您提供了一个字符串,您可以将该字符串放入隐藏的输入中 .
Firefox有canvas.toBlob()和canvas.mozGetAsFile()方法 .
但其他浏览器则没有 .
我们可以从canvas获取dataurl,然后将dataurl转换为blob对象 .
这是我的
dataURLtoBlob()
功能 . 它很短 .将此函数与FormData一起使用来处理画布或dataurl .
例如:
此外,您可以为非gecko引擎浏览器创建
HTMLCanvasElement.prototype.toBlob
方法 .现在
canvas.toBlob()
适用于所有现代浏览器,不仅适用于Firefox . 例如:谢谢! @steovi为此解决方案 .
我已经添加了对ES6版本的支持,并从unescape更改为dataURI(不推荐使用unescape) .
这个适用于iOS和Safari .
你需要使用Stoive的ArrayBuffer解决方案,但是你不能像vava720那样使用BlobBuilder,所以这里是两者的混搭 .
我有与Ravinder Payal完全相同的问题,我找到了答案 . 试试这个: