【使用說明】瀏覽資源文件,選擇一張圖片顯示在窗口中。
【環境說明】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繪製圖像,經過交互修改圖像的內容,再保存到本地
。。。