【Html5+JS】简单的查看图片程序

最新推荐文章于 2022-01-09 17:38:13 发布

云梦别

最新推荐文章于 2022-01-09 17:38:13 发布

阅读量1k

点赞数

分类专栏： Windows 文章标签： javascript html5 Universal Windows

本文链接：https://blog.csdn.net/sysu_cm/article/details/49159983

版权

Windows 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【使用说明】浏览资源文件，选择一张图片显示在窗口中。

【环境说明】VS2015->基于universal windows框架的JavaScript/html5程序

【html部分】

<body>
    <div >
        <h1 class="headerClass">MyImageReader</h1>
    </div>
    <div class="inputArea">
        <input type="file" id="loadFile" />
        <button id="helloButton">UpLoad</button>
    </div>
    <div class="imageArea">
        <img class="imageBox" id="myimg" width="300" height="300" />
    </div>
</body>

【JS部分】

	function buttonClickHandler(eventInfo) {

	    var fileSrc = document.getElementById("loadFile");
	    var mainImg = document.getElementById("myimg");
	    mainImg.style.display = 'block';
	    if (fileSrc && fileSrc.files[0]) {
	        mainImg.src = window.URL.createObjectURL(fileSrc.files[0]);
	    }
	}

【效果】

运行：

选择一张图以后，UpLoad：

【扩展1】使用Canvas绘制图像，经过交互修改图像的内容，再保存到本地

。。。

云梦别

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Html5+JS】简单的查看图片程序

【使用说明】浏览资源文件，选择一张图片显示在窗口中。【环境说明】VS2015->基于universal windows框架的JavaScript/html5程序【html部分】 MyImageReader UpLoad 【JS部分】 function
复制链接

扫一扫