如何在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频？
如何在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频？
提问于 2018-07-12 16:07:59
在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频
我们希望使用设备中特定文件夹中的图像和视频创建一个滑块。
意味着，当UWP应用程序启动时，它应该从Uwp javascript应用程序中的特定文件夹获取内容(资产)。有没有办法做到这一点？例如:我们想要从d:/My project data获取内容。
<style>
body {
font: normal 0.9em Arial;
color: #ddd;
background: #FFFFFF;
}
header {
display: block;
font-size: 1.2em;
margin-bottom: 100px;
}
header a, header span {
display: inline-block;
padding: 4px 8px;
margin-right: 10px;
border: 2px solid #000;
background: #DDD;
color: #000;
text-decoration: none;
text-align: center;
height: 20px;
}
header span {
background: white;
}
a {
color: #7fa9fe;
}
</style><!DOCTYPE html>
<html>
<head>
<title>Demo 4: jQuery Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="js/thumbnail-slider.js" type="text/javascript"></script>
<script src="thumbnail-slider.js"></script>
<body>
<!--start-->
<div style="padding:260px 0;background:#FFFFFF;">
<div id="thumbnail-slider">
<div class="inner">
<ul>
<li>
<a class="thumb" href="img/1.jpg"></a>
</li>
<li>
<a class="thumb" href="img/2.jpg"></a>
</li>
<li>
<a class="thumb" href="img/3.jpg"></a>
</li>
<li>
<a class="thumb" href="img/4.jpg"></a>
</li>
<li>
<a class="thumb" href="img/5.jpg"></a>
</li>
<li>
<a class="thumb" href="img/6.jpg"></a>
</li>
<li>
<a class="thumb" href="img/7.jpg"></a>
</li>
<li>
<a class="thumb" href="img/8.jpg"></a>
</li>
<li>
<a class="thumb" href="img/9.jpg"></a>
</li>
<li>
<a class="thumb" href="img/10.jpg"></a>
</li>
<li>
<a class="thumb" href="img/11.jpg"></a>
</li>
<li>
<a class="thumb" href="img/2.jpg"></a>
</li>
<li>
<a class="thumb" href="img/3.jpg"></a>
</li>
<li>
<a class="thumb" href="img/4.jpg"></a>
</li>
<li>
<a class="thumb" href="img/5.jpg"></a>
</li>
<li>
<a class="thumb" href="img/6.jpg"></a>
</li>
<li>
<a class="thumb" href="img/7.jpg"></a>
</li>
<li>
<a class="thumb" href="img/8.jpg"></a>
</li>
<li>
<a class="thumb" href="img/9.jpg"></a>
</li>
<li>
<a class="thumb" href="img/10.jpg"></a>
</li>
<li>
<a class="thumb" href="img/11.jpg"></a>
</li>
<li>
<video width="350" height="350" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/mcvideo.mp4" type="video/mp4" />
</video>
<li>
<video width="260" height="260" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/SampleVideo_640x360_1mb.mp4" type="video/mp4" />
</video>
</li>
<li>
<video width="260" height="260" autoplay="autoplay" loop="loop" display="inline-block;">
<source src="img/small.mp4" type="video/mp4" />
</video>
</li>
</ul>
</div>
</div>
</div>
<!--end-->
<div style="max-width:700px;margin:0 auto 80px;background:#333;">
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-07-17 11:30:23
您能教我如何使用StorageFile
访问图片和视频访问图片和
添加broadFileSystemAccess功能后，您可以使用Windows Storage Api访问特定的文件夹，如D磁盘。然后将图像文件转换成Base64数据进行显示。您可以参考以下内容。
function ConverToBase64(file, success) {
file.openAsync(Windows.Storage.FileAccessMode.read).then(function (stream) {
var inputStream = stream.getInputStreamAt(0);
var reader = new Windows.Storage.Streams.DataReader(inputStream);
var size = stream.size;
if (size > 0) {
reader.loadAsync(size).then(function () {
var buffer = reader.readBuffer(size);
var base64 = Windows.Security.Cryptography.CryptographicBuffer.encodeToBase64String(buffer);
success(base64);
})
}
});
}
function addimage() {
Windows.Storage.StorageFile.getFileFromPathAsync("D:\\hello.PNG").then(
function (file) {
ConverToBase64(file, function (str) {
var img = document.createElement("img");
img.src = 'data:image/png;base64,' + str;
document.getElementById("myDiv").appendChild(img);
});
}, function (error) {
}
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51300398
复制相关文章
相似问题
腾讯云开发者
