这篇文章主要介绍了Html读取本地文件夹下图片并显示的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一 目的

在Html上选择本地文件夹,自动读取文件夹及子文件夹下的所有图片并显示在页面。

技术分析:

存在问题

    Html中file标签获取到的路径时相对的。 Html中Img指定源时需要的是绝对路径。

解决方法:

调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径),然后把数据加载到FileReader中(base64格式),之后就可以用Img来指定源时base64格式的数据,可以绘制图片。

二 代码

<!DOCTYPE html>
<html>
<head>
    <title>ReadImageDemo</title>
</head>
<body>
    <input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
    <canvas id="myCanvas" width=1440 height=900></canvas>
 
    <script type="text/javascript">
        var imgPosX = 0;
        var imgWidth = 256;
        function dealSelectFiles(){
            /// get select files.
            var selectFiles = document.getElementById("selectFiles").files;
 
            for(var file of selectFiles){
                console.log(file.webkitRelativePath);
                /// read file content.
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function(){
                    /// deal data.
                    var img = new Image();
                    /// after loader, result storage the file content result.
                    img.src = this.result;  
                    img.onload = function(){
                        var myCanvas = document.getElementById("myCanvas");
                        var cxt = myCanvas.getContext('2d');
                        cxt.drawImage(img, imgPosX, 0);
                        imgPosX += imgWidth;
                    }
                }
            }
        }
    </script>
</body>
</html>

三 效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
字节跳动:我们的确在探讨在美国之外设立TikTok总部的可能性

字节跳动:我们的确在探

针对外界有关字节跳动旗下TikTok考虑在英国设立总部的
药价疯长背后,拥抱互联网的药店为何先扛不住了?

药价疯长背后,拥抱互联

未来5-10年内,中国的药店至少先要死掉1/3,这逐渐成为主
LG化学上半年在全球电动汽车电池市场份额位居第一

LG化学上半年在全球电

市场调查机构SNE Research周一发布的数据显示,LG化学成
Zoom确认将仅通过合作伙伴进行销售 只保留一种销售方式

Zoom确认将仅通过合作

通过合作伙伴销售的方式将成为未来Zoom在中国大陆市场
科学家拍了拍你:“社恐”别怕…触摸可以带来治愈力量

科学家拍了拍你:“社恐

神经科学家发现,在友好的社交过程中,触摸会和大脑分泌的
商汤科技再传估值100亿美元科创板上市 回应:不予置评

商汤科技再传估值100

商汤科技上市动态再有传闻,据报道,商汤科技考虑在最近一
最新文章
HTML中利用div+CSS实现简单的箭头图标的代码

HTML中利用div+CSS实

这篇文章主要介绍了HTML中利用div+CSS实现简单的箭头
HTMl页面中返回顶部的几种实现小结

HTMl页面中返回顶部的

这篇文章主要介绍了HTMl页面中返回顶部的几种实现小结
解决vscode 中保存后html自动格式化的问题

解决vscode 中保存后h

这篇文章主要介绍了vscode 中保存后html自动格式化的
html浮动提示框功能的实现代码

html浮动提示框功能的

这篇文章主要介绍了html浮动提示框功能的实现代码,需
详解HTML中的图片标签的用法

详解HTML中的图片标签

这篇文章主要介绍了详解HTML中的图片标签的用法,本文
使用html-webpack-plugin'入再内存中生成 html 页面插件

使用html-webpack-plu

这篇文章主要介绍了使用html-webpack-plugin'入再内