我知道没有blob网址只有对象.
我为视频缓冲区创建了自己的blob对象,然后在视频标记的src中使用它,类似于blob://website.com/blablobbla.我在它工作的浏览器中打开了这个url
当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了
我想知道如何对我的blob网址执行相同操作,以便它们只能在html视频标记的src中工作,并且在浏览器的外部选项卡/窗口中发出错误或不起作用.我只是想知道这个和blob对象及其url属性背后的技术.
我编写了下面的代码,使用文件API显示本地文件中的文本,但是当我单击按钮时,没有任何反应.我在浏览器中检查元素时出现以下错误.我究竟做错了什么？
未捕获的TypeError:无法在'FileReader'上执行'readAsText':参数1不是'Blob'类型.
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a click event to a button.</p>
<button id="myBtn">Try it</button>
<pre id="file"></pre>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
var file = "test.txt"
var reader = new FileReader();
document.getElementById('file').innerText = reader.result;
reader.readAsText(file);
});
</script>
</body>
</html>我正在寻找一种优雅的方法来生成与FileAPI一起使用的缩略图.目前我得到一个表示图像的DataURL.问题是,如果图像非常大,则移动它并重新渲染它会变得CPU密集.我可以看到两个选项来解决这个问题.
随着HTML5我们有一个canvas元素？有谁知道如何使用它从图片生成缩略图？它们不一定非常完美 - 取样质量是可以接受的.有jQuery插件可以帮我吗？有没有其他方法可以加速客户端使用大图像？
我正在使用HTML5,并且Firefox 3.6+:除了之外没有必要支持任何其他内容Firefox 3.6+,请不要提供建议IE 6.0
我正在使用带有FileApi的HTML5技术.
我的问题很简单,但我在2天前搜索,我在网上找不到任何东西
我有一个DicomFile.我使用HTML5中的FileApi将其分解,并获取所有信息.最后,我得到一个字节数组中的图像数据.问题是我无法解码JPEG2000图像并在浏览器中显示它(Chrome,FireFox,任何).例如,如果图像数据以JPEG格式编码,我在浏览器中显示图像完全没有问题,但问题在于JPEG2000或JPEG-LS.我知道那些图像格式无法在网页浏览器中显示,但它必须在Javascript中存在一个库来解码JPEG2000或JPEG-LS中的图像数据.这非常重要,我有点贬低.
如果我找不到任何办法,我将不得不改变我的所有工作.
非常感谢你提前
IOS6已经发布,我一直在测试照片上传.
它效果很好,但是通过3G上的图像越大,它就像预期的那样缓慢.
感谢File API和Canvas,可以使用JavaScript调整图像大小.我希望如果我在尝试上传图像之前调整图像大小,它们会更快上传 - 这样可以提高用户体验.随着智能手机处理器以比网络速度快的速度增长,我相信这个解决方案是一个胜利者.
Nicolas为图像大小调整提供了出色的解决方案:
但是,我最难用jQuery的Ajax实现它.任何建议或帮助都表示赞赏,因为此代码可能对IOS6后的移动Web应用程序开发非常有用.
var fileType = file.type,
reader = new FileReader();
reader.onloadend = function () {
var image = new Image();
image.src = reader.result;
image.onload = function () {
//Detect image size
var maxWidth = 960,
maxHeight = 960,
imageWidth = image.width,
imageHeight = image.height;
if (imageWidth > imageHeight) {
if (imageWidth > maxWidth) {
imageHeight *= maxWidth / imageWidth;
imageWidth = maxWidth;
}
} else {
if (imageHeight > maxHeight) {
imageWidth *= …JavaScript有两个File和Blob的文件表示,无一不是几乎同样的事情.有没有办法检查变量是持有一种数据File还是一种Blob数据？
问题解决了,看了评论
我在HTML5文件API中遇到的第三个问题:我仍在Mac OS X Snow Leopard上使用Chrome 12,我仍在尝试使用HTML5文件API读取文件,但因为"SECURITY_ERR"而调用了FileHandler.error() occurres.我尝试读取的文件是来自桌面的常规.txt文件,但它既不能用于其他文件,尽管我可以使用常规应用程序打开它们.
function FileHandler(files, action) {
console.log('FileHandler called.');
this.files = files;
this.reader = new FileReader();
this.action = action;
this.handle = function() {
console.log('FileHandler.handle called.');
for (var i = 0; i < this.files.length; i++) {
this.reader.readAsDataURL(files[i]);
}
}
this.upload = function() {
console.log('FileHandler.upload called.');
console.log(this.reader);
data = {
content: this.reader.result
}
console.log(data);
}
this.error = function() {
console.log('An error occurred while reading the file.');
console.log(this.reader.error);
}
this.reader.onload = this.upload.bind(this);
this.reader.onerror = this.error.bind(this);
}
该代码生成以下控制台输出:http …
此问题与旧浏览器中的如何更新(与Safari 5.1.4相关)有关并受其启发
给定一个<input type="file">具有元件files包含属性File从继承的对象Blob,是有可能创造一个ArrayBuffer和转换ArrayBuffer到一个data URI从一个Blob或File对象,而无需使用FileReader？
到目前为止已尝试过方法
WebSocket使用.binaryTypeset 创建一个mock "arraybuffer",创建一个MessageEventwith event.dataset to Fileobject; 结果是处理程序的File对象onmessage
设置原型File为ArrayBuffer,Uint8Array; 结果是Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()
设置File在 …
我正在尝试使用 JavaScript 中的 FileApi 访问文本文件的前几行。
为此，我从文件的开头切片任意数量的字节并将 blob 交给 FileReader。
对于大文件，这需要很长时间，但据我所知，只需要访问文件的前几个字节。后台是否有一些实现需要在切片之前访问整个文件？它是否取决于 FileApi 的浏览器实现？我目前在 Chrome 和 Edge（铬）中进行了测试。
使用性能开发工具在 Chrome 中进行分析显示 reader.onloadend 之前有大量空闲时间，并且 ram 使用量没有增加。然而，这可能是因为 FileApi 是在浏览器本身中实现的，并没有反映在 JavaScript 性能统计中。
我的 FileReader 实现看起来像这样：
const reader = new FileReader();
reader.onloadend = (evt) => {
if (evt.target.readyState == FileReader.DONE) {
console.log(evt.target.result.toString());
}
};
// Slice first 10240 bytes of the file
var blob = files.item(0).slice(0, 1024 * 10);
// Start reading the sliced blob
reader.readAsBinaryString(blob);
它工作正常，但如所描述的那样，对于大文件来说表现不佳。我尝试了 10kb、100mb 和 6gb。记录前 10kb 之前的时间似乎与文件大小直接相关。
您对如何提高读取文件开头的性能有什么建议吗？
编辑：使用@BenjaminGruenbaum 建议的响应和 DOM 流确实不能提高读取性能。 …
fileapi ×10
javascript ×8
blob ×3
html5 ×3
filereader ×2
jquery ×2
ajax ×1
data-uri ×1
decode ×1
dicom ×1
html ×1
ios6 ×1
jpeg2000 ×1
media-source ×1
typed-arrays ×1
url ×1