相关疑难解决方法(0)

我一直在尝试重新实现像Mozilla Hacks网站上的 HTML5图像上传器,但它适用于WebKit浏览器.部分任务是从canvas对象中提取图像文件并将其附加到FormData对象以进行上载.

问题是虽然canvas具有toDataURL返回图像文件表示的函数,但FormData对象仅接受来自File API的 File或Blob对象.

Mozilla解决方案使用以下仅限Firefox的功能canvas:

var file = canvas.mozGetAsFile("foo.png");

...在WebKit浏览器上不可用.我能想到的最好的解决方案是找到一种方法将数据URI转换为File对象,我认为它可能是File API的一部分,但我不能为我的生活找到一些东西.

可能吗？如果没有,任何替代方案？

谢谢.

这是面条刮痕.

请记住,我们有HTML5本地存储和xhr v2,什么不是.我想知道是否有人能找到一个有效的例子,甚至只是给我一个是或否的问题:

是否可以使用新的本地存储(或其他)预先调整图像大小,以便没有关于调整图像大小的线索的用户可以将他们的10mb图像拖到我的网站中,然后使用新的本地存储调整大小.然后以较小的尺寸上传它.

我完全知道你可以用Flash,Java小程序,活动X来做...问题是如果你能用Javascript + Html5做.

期待对此的回应.

Ta现在.

使用FileReader's readAsDataURL()我可以将任意数据转换为数据URL.有没有办法Blob使用内置的浏览器apis 将数据URL转换回实例？

问题

我可以成功完成以下步骤,但UI可能无法响应2 MB或更多的文件.这些文件的大小范围可以是用户从相机或桌面上传的内容,因此我需要处理它们.

1. 用户使用标准文件输入HTML元素上传文件:

   <input class="cancel" type="file" name="userFile" id="userFile" accept="image/*"/>

2. 在客户端,我调整文件的大小,使宽度为500px或更小(特别是减少大文件的图像大小)并显示图像.

3. 在客户端,我上传调整大小的较小文件.

演示

看到这个小提琴.

在那里你可以看到-上传较大文件时停止移动.Chrome中的延迟似乎比Firefox更重要,但在Firefox上仍然显而易见.

阻塞的原因

1. 在img src上设置文件数据URL时.这是必需的,以便可以在画布中调整图像大小.

   img.src = e.target.result;//blocking here

2. 当img被写入画布时.这是调整图像大小所必需的.

   ctx.drawImage( img, 0, 0, width, height );//blocking here

我考虑过的选项

1. 在Web Worker中执行阻止操作.这是不可能的,因为Web Workers无法操作DOM元素,并且在操作DOM时都会发生阻塞调用.

2. 调整Web Worker中的原始图像数据的大小.不幸的是,我不知道img的格式是什么,所以调整大小需要处理所有图像类型.我不知道任何JavaScript库会这样做,我不特别想编写自己的跨格式图像压缩库.

3. 直接调整img的大小,但这不会更改需要上载的基础数据大小.

4. 在服务器上调整大小不是一个选项,因为我想减少上传大小.在客户端上调整大小也更好,因为大图像的内存会提前释放,并且会立即显示调整大小的图像.

其他想法

我知道设置img src是异步的,所以我猜这是复制导致阻塞的数据.我想知道是否有办法共享相同的数据而不是复制？

我正在使用我认为是FileReader用于获取数据URL 的标准方法,然后将数据URL设置为a img.src并canvas.drawImage调整大小(有很多这样的示例,其中一个在这里).任何有助于提高这种方法或其他方法的响应能力的帮助都将受到赞赏.