URL & webkitURL

最新推荐文章于 2022-03-12 15:09:12 发布
最新推荐文章于 2022-03-12 15:09:12 发布
阅读量429 收藏
点赞数
原文链接：http://www.cnblogs.com/iNewbie/p/5710953.html
版权

base64带来的坑

在web中想要是实现图片在线预览的方式有几种
1、先上传
2、使用FileReader对象
3、URL.createObjectURL(file|blob)
base64 能将图片读取成同样大小的base64字符，这样html文件也就随之增大，造成的无非是浏览器卡顿，每一次新的渲染都会很慢

js

var window.URL = window.URL | window.webkitURL;
objectURL = URL.createObjectURL(blob | file);
// objectURL --> blob:http%3A//127.0.0.1%3A8020/32b4467f-5870-44dd-a119-fddf4e6f8f94

提示

1、然而该方法兼容性并不高，只支持chrome 8, firefox4, ie10（fuck）,15, safari6
2、官方强调：在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。
每个对象必须通过调用 URL.revokeObjectURL(objectURL )方法来释放

转载于:https://www.cnblogs.com/iNewbie/p/5710953.html

weixin_33749242
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webkit URL加载文档
m632587166的专栏
02-24 1731
WebkitURL加载流程 1.   用户输入URL后，最先调用的接口是： FrameLoader::load(constResourceRequest& request)    2.Load()通过ResourceRequest数据调用createDocumentLoader(request.resourceRequest(),request.substituteData())来创建一个
android webkit学习笔记1---url的load过程
shadow_dance的专栏
06-19 6534
webkit总体上分成两块，核心库，android适配层。 下面通过webkit打开baidu来分析下具体的过程，就可以知道webkit的工作模式了。 1. 首先是app中创建了webView，并调用它的loadurl方法：       mWebView.loadUrl("http://www.baidu.com"); 2.   frameworks/base/cor
window.URL || window.webkitURL || window.mozURL 的作用
新征程的博客
03-01 2089
window.URL || window.webkitURL || window.mozURL 的作用 URL对象是硬盘（SD卡等）指向文件的一个路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径，这个时候就可以设置到<img>中显示了。 window.webkitURL和window.URL是一样的，window.
android webkit 开源链接,Android webkit 中的URL解码
weixin_31264951的博客
06-05 112
源代码片断：作用是把 URL 中的 %2F 等解码为十进制数格式public static byte[] decode(byte[] url) throws IllegalArgumentException {if (url.length == 0) {return new byte[0];}// Create a new byte array with the same length to en...
js blob类型url的视频下载问题的解决
10-15
var url = window.URL || window.webkitURL; var a = document.createElement('a'); a.href = url.createObjectURL(blob); a.download = fileName; document.body.appendChild(a); a.click(); setTimeout...
URL.createObjectURL和URL.revokeObjectURL的应用
龘
09-02 351
一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL。 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象。 objectURL = URL.createObjectURL(blob || file); 参数: File对象或者Blob对象 File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象.
请使用Pointfree 编程风格改造以下代码：export const getObjectURL = (file) => { let url = null; if (window.createObjectURL !== undefined) { // basic url = window.createObjectURL(file); } else if (window.webkitURL !== undefined) { // webkit or chrome try { url = window.webkitURL.createObjectURL(file); } catch (error) { console.log(error); } } else if (window.URL !== undefined) { // mozilla(firefox) try { url = window.URL.createObjectURL(file); } catch (error) { console.log(error); } } return url; }
03-24
const objectURL = (window.createObjectURL || window.webkitURL.createObjectURL || window.URL.createObjectURL) try { return objectURL(file) } catch (error) { console.log(error) return null } } ...
图片上传及预览
weixin_42395736的博客
03-12 308
<input type="file" name="myfile"> <img src="" alt="" id="img"> 方式一：使用window.createObjectURL let input =document.getElementsByName('myfile')[0]// 获取input的file对象 let img=document.getElementById('img') input.addEventListener('change',()=>{
自制网盘搜索器（使用WebKit .NET内嵌Webkit浏览器内核）
05-13
自己搞的网盘搜索器，可以搜索百度网盘、新浪微盘等
Webkit 从url到构建DOM树过程（抄自WebKit技术内幕）
weixin_33712987的博客
05-03 84
2019独角兽企业重金招聘Python工程师标准>>> ...
下载各类文件流的方法(兼容各个浏览器，包含错误信息处理)
STRIVE_LC的博客
11-03 951
downloadFile(res,fileName) { const blob = new Blob([res], {type: 'application/json'}) // 通过fileReader读取这个blob const reader = new FileReader() // 将blob对象以文本的方式读出，读出完成后将会执行onload方法 reader.readAsText(blob) reader.onload = .
浏览器探究——webkit部分——http请求
whotodo
02-24 229
浏览器探究——webkit部分——http请求 执行加载一个页面时，BrowserFrame的loadUrl会通过jni调用到WebCoreFrameBridge.cpp的LoadUrl中。Java层的BrowserFrame对应的是c层的WebCore::Frame WebCoreFrameBridge::LoadUrl 这个函数会通过参数获取到url并用url创建一个WebCore:...
window.URL.createObjectURL 的使用
热门推荐
baidu_38558076的博客
05-11 9万+
window.URL.createObjectURL    可以用于在浏览器上预览本地图片或者视频预览视频代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;script type="text/javascript"
window.url.createobjecturl 兼容多个浏览器（IE,google,360,Safari,firefox）
静哥亻门
04-18 1万+
学习了window.url.createobjecturl 用在多个浏览器
Webkit分析传入的url到真正网络模块发起加载请求
11-16 882
WebCore::ResourceHandle::start() >>d->m_job = new QNetworkReplyHandler(this, QNetworkReplyHandler::AsynchronousLoad, d->m_defersLoading);   真正的加载交由平台Port完成,针对Request创建一个异步的加载处理 WebCore::Resourc
webkit 内核浏览器,<img>异步加载相同URL,不触发load事件的BUG
adkaek1131的博客
11-18 214
最近一个项目的前端部分是依靠img.onload 来实现的.可是经常会出现加载不出图片的情况 ,由于出现相邻两次加载相同图片的概率很小,所以一直没能还原bug,让人头疼很久.昨天实在是忍不了了,在猎豹浏览器上疯点几千下,终于终结出问题的根源:相邻两次加载相同的src 属性 .不触发 onload 事件.chrome\qq 等使用webkit内核的浏览器都会出现这种情况. ...
js 通过URL下载PDF文件（兼容PC端、移动端大部分浏览器）
wangfei
01-06 1万+
在网上找了好多资料，最后总结下自己的实现方案，废话不多说，直接上代码 一、 第一种，后台服务器有静态资源且是固定的文件名（GET方式下载文件） window.location.href="http://www.域名/template.xlsx(文件名)" 二、第二种，后台返回文件流，前台进行读取保存 1、前端代码 /** * 文件下载（from表单单文件下载） * @param url */ function downloadFileForm(url) { var file.
js图片前端预览之 filereader 和 window.URL.createObjectURL
dingbenji5337的博客
06-29 322
1 //preview img ： filereader方式 2 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0]; 6 8 var fr = ne...
window.webkitURL.createObjectURL(file);
最新发布
05-16
`window.webkitURL.createObjectURL(file)` 方法会创建一个 DOMString，含有一个表示参数对象的 URL，这个 URL 表示参数对象的内部地址。通过这个 URL，用户就可以引用浏览器中的文件，例如图片或者视频等等。使用该方法可以将文件与 Blob 对象转化为 URL，使得它们可以被可视化组件加载。 举个例子，以下代码展示了如何在浏览器中显示用户上传的图片[^1]： ```javascript <input type="file" onchange="loadFile(event)"> <img id="output"> <script> function loadFile(event) { var output = document.getElementById('output'); output.src = window.webkitURL.createObjectURL(event.target.files); }; </script> ``` 这个代码中，当用户上传图片时，`loadFile()` 方法会被调用，这个方法会获取用户上传的文件并使用 `window.webkitURL.createObjectURL()` 方法生成一个 URL。最后这个 URL 将赋值给 `img` 标签的 `src` 属性，从而在浏览器中显示图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值