以下是我的示例代码：
- var input = document.createElement('input');
- input.type = 'file';
- document.body.appendChild(input);
- input.addEventListener('change',function(){
- var file = input.files[0];
- var reader = new FileReader();
- reader.onload = function(e){
- var image = new Image();
- image.src = e.target.result;
- };
- reader.readAsDataURL(file);
- });
加载页面,选择一个大图像(我正在使用2.9MB 4288×3216图像).刷新页面并选择相同的图像.结果？标签崩溃！ (呵呵！
我的猜测是,这是Chrome实现File API的错误,但如果有人可以确认甚至提供解决方法,我会很乐意.我真的想要能够显示照片的缩略图,而无需去服务器生成一个照片(即使只是Chrome和FF).
另外,使用我上面的示例代码,只要您选择照片,该标签开始使用大约32MB的内存.我猜想,这是可以预料的,但是关于我的是,这个记忆似乎没有被垃圾收集器释放出来.所以如果我不断选择更多的照片,我会不断消耗更多的记忆.我不知道这是否与崩溃的问题有关,但这绝对是一个问题.
感谢任何帮助！
解决方法
内存问题可能是这个错误的结果：
http://crbug.com/36142.基本上,Chrome缓存数据：URL,当img.src更改时,当前不会释放内存.另一个问题是数据：URL对您编码的数据产生了33％的开销.这意味着你实际上在图像上设置了一个〜3.85MB的资源,而不是2.9MB.
由于您不处理内容(实际字节),因此无需阅读文件内容.一个选项是创建一个blob：url.还有一个明确的撤销方法,所以你不会遇到相同的内存缓存问题.就像是：
- input.addEventListener('change',function(e) {
- var file = input.files[0];
- window.URL = window.webkitURL || window.URL; // Vendor prefixed in Chrome.
- var img = document.createElement('img');
- img.onload = function(e) {
- window.URL.revokeObjectURL(img.src); // Clean up after yourself.
- };
- img.src = window.URL.createObjectURL(file);
- document.body.appendChild(img);
- });
