程序员经验分享-hwhale

FileReader 与 window.URL.createObjectURL

2024-01-05

我正在构建一个移动网站，我想使用相机 API 来拍照。图像应显示在网站上并上传到服务器。根据MDN 上的 Camera API 介绍 https://developer.mozilla.org/en-US/docs/Web/Guide/API/Camera可以使用以下方式在网站上访问和显示图像FileReader or window.URL.createObjectURL. I tested http://lab.html5test.com/files/这些可能的解决方案在 iPad（Safari 和 Chrome）和 Android 平板电脑（Chrome 和 Firefox）上成功实现。

有什么区别FileReader and window.URL.createObjectURL？我认为window.URL.createObjectURL较新，但还不是标准。性能上有区别吗？


有差别。

  1. time
  • createObjectURL同步执行（立即）
  • FileReader.readAsDataURL异步执行（一段时间后）
  1. 内存使用情况
  • createObjectURL返回带哈希的 url，并将对象存储在内存中，直到文档触发卸载事件（例如文档关闭）或执行revokeObjectURL
  • FileReader.readAsDataURL回报base64包含许多字符，并且比 blob url 使用更多内存，但在不使用时从内存中删除（通过垃圾收集器）
  1. support
  • createObjectURL从 IE 10 和所有现代浏览器开始
  • FileReader.readAsDataURL从 IE 10 和所有现代浏览器开始

对我来说，最好使用 blob url（通过createObjectURL），效率更高，速度更快，但是如果使用很多对象url，则需要 通过以下方式释放这些网址revokeObjectURL（释放内存）。

例如，您可以在 Image onload 处理程序中调用 URL.revokeObjectURL，并且 Image 对象将保留图像数据，而不会丢失它，Nahuel Greco (c)。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

FileUpload

FileReader 与 window.URL.createObjectURL 的相关文章

  • AJAX 安全问题

    我希望能够解决一些关于 AJAX 安全性的问题 这是我试图理解的一个场景 假设我正在使用 AJAX 向页面请求一些半敏感材料 例如 我将把用户的 ID 传递给一个 php 文件 并返回一些关于他们自己的信息 现在 是什么阻止人们模拟此 Ja

  • 在 Node.js 中生成带条形码的 pdf

    我在用https github com devongovett pdfkit https github com devongovett pdfkit生成 PDF 文件 我可以简单地使用类似的方法 app get get pdf req re

  • JavaScript 字符串中的脚本标签[重复]

    这个问题在这里已经有答案了 我遇到一个问题 即 JavaScript 中带引号的字符串内有结束脚本标记 并且它正在杀死脚本 我认为这不是预期的行为 可以在这里看到这样的示例 http jsbin com oqepe edit http js

  • 获取被调用的 javascript 文件的查询字符串

    是否可以在调用的 javascript 文件上使用 javascript 获取查询参数 如下所示 in html in file js console log this location query 这是否可能以某种方式实现 或者我必须使用

  • 判断字符串是否包含有效的javascript代码

    我正在寻找一个C 返回的函数true如果字符串包含有效的 JavaScript 语法 例如 IsValidJavascript alert hello 会回来true but IsValidJavascript alertXXhelloZ

  • JavaScript 相当于 Python 的参数化 string.format() 函数

    这是 Python 示例 gt gt gt Coordinates latitude longitude format latitude 37 24N longitude 115 81W Coordinates 37 24N 115 81W

  • Javascript 作为对象键的函数与块中标记函数之间的语法冲突

    假设您有一个支持两者的浏览器带标签的函数声明 https developer mozilla org en US docs Web JavaScript Reference Statements label Labeled function

  • 使用 jQuery inputmask 插件范围 0-100

    如何创建 0 到 100 范围内的掩码 document ready function masked inputmask 您可以使用jquery inputmask regex extensions js为了那个原因 你可以找到带有所有扩展

  • Apache Thrift Java-Javascript 通信

    我正在编写一个基于 Apache Thrift 的 Java 服务器 它将从 Javascript 客户端接收数据 我已经完成了 Java 服务器 但问题是我可以获得 Javascript 客户端的工作示例 我无法找到一个好的示例 构建文档

  • 如何通过setTimeout函数定期打印数字？

    var i 0 function counter for i i lt 100 i setTimeout gt console log i 2000 counter 我想以 2 秒的间隔打印 i 但它立即打印 每次打印调用只需要几微秒 为什

  • 检查用户设备的 GPS 是否开启

    我正在使用 jQuery Mobile 和 PHP 开发一个应用程序 我没有使用 Phonegap 或其他框架 我需要找到用户的geolocation 如果用户设备的 GPS 关闭 那么我无法获取位置 现在我需要查找用户设备的 GPS 是否

  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa

  • Angular2：动态同步http请求

    Goal 发出一系列同步 http 请求并能够将它们作为一个可观察流进行订阅 示例 不工作 let query arr test1 test2 test3 function make request query arr if query a

  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib

  • 如何在React中动态分配属性？

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem

  • node.js 模块/导出系统：是否可以将模块导出为函数

    我想在 Dispatch js 中做这样的事情 function handle msg exports handle 这在调用index js中 var dispatch require Dispatch dispatch data 有任何

  • 了解 Document.createElement()

    我在用着GWT及其底层DOM能力 我基本上想要实现的是 Have a div包含一些文本的元素 其中一些文本将被包围span元素 span 元素可相互拖动并提供上下文菜单 New span元素可以由最终用户动态创建 它可能是这样的 在应用程

  • javascript - 如何获取对象名称或关联数组索引名称？

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n

  • React Redux - 在辅助函数中访问现有存储

    我试图在反应组件之外获取存储实例 存储状态 即在单独的辅助函数中 我有我的减速器 我的动作 我在最上面的组件中创建了一个商店 configStore js import createStore from redux import gener

  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行

随机推荐

热门标签