首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频?

如何在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频?
EN

Stack Overflow用户
提问于 2018-07-12 16:07:59
回答 1查看 187关注 0票数 -3

在UWP Javascript应用程序中访问特定本地文件夹中的图像和视频

我们希望使用设备中特定文件夹中的图像和视频创建一个滑块。

意味着,当UWP应用程序启动时,它应该从Uwp javascript应用程序中的特定文件夹获取内容(资产)。有没有办法做到这一点?例如:我们想要从d:/My project data获取内容。

代码语言:javascript
复制
<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>
代码语言:javascript
复制
<!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>

EN

回答 1

Stack Overflow用户

发布于 2018-07-17 11:30:23

您能教我如何使用StorageFile

访问图片和视频访问图片和

添加broadFileSystemAccess功能后,您可以使用Windows Storage Api访问特定的文件夹,如D磁盘。然后将图像文件转换成Base64数据进行显示。您可以参考以下内容。

代码语言:javascript
复制
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) {

        }
    );
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51300398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档