window.URL || window.webkitURL || window.mozURL 的作用

本文介绍了URL对象的概念及其在文件上传预览中的应用。通过window.URL.createObjectURL()方法可以获取一个临时的URL链接,用于在<img>标签中预览未上传的图片。文章还解释了window.webkitURL与window.URL的关系,并指出了不同浏览器的具体实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

URL对象是硬盘(SD卡等)指向文件的一个路径,如果我们做文件上传的时候,想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径,这个时候就可以设置到<img>中显示了。
window.webkitURL和window.URL是一样的,window.URL标准定义,window.webkitURL是webkit内核的实现(一般手机上就是使用这个),还有火狐等浏览器的实现。

转载于:https://www.cnblogs.com/damonLv/p/6638061.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Camera</title> <script type="text/javascript"> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; function getUserMedia(constraints, success, failure) { navigator.getUserMedia(constraints, function(stream) { var videoSrc = (window.URL && window.URL.createObjectURL(stream)) || stream; success.apply(null, [videoSrc]); }, failure); } function initCamera(constraints, video, callback) { getUserMedia(constraints, function (src) { video.src = src; video.addEventListener('loadeddata', function() { var attempts = 10; function checkVideo() { if (attempts > 0) { if (video.videoWidth > 0 && video.videoHeight > 0) { console.log(video.videoWidth + "px x " + video.videoHeight + "px"); video.play(); callback(); } else { window.setTimeout(checkVideo, 100); } } else { callback('Unable to play video stream.'); } attempts--; } checkVideo(); }, false); }, function(e) { console.log(e); }); } function copyToCanvas(video, ctx) { ( function frame() { ctx.drawImage(video, 0, 0); window.requestAnimationFrame(frame); }()); } window.addEventListener('load', function() { var constraints = { video: { mandatory: { minWidth: 1280, minHeight: 720 } } }, video = document.createElement('video'), canvas = document.createElement('canvas'); document.body.appendChild(video); document.body.appendChild(canvas); initCamera(constraints, video, function() { canvas.setAttribute('width', video.videoWidth); canvas.setAttribute('height', video.videoHeight); copyToCanvas(video, canvas.getContext('2d')); }); }, false); </script> </head> <body> </body> </html>camera_example.html:14 Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed. at camera_example.html:14:62
最新发布
07-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值