【Html5+JS】簡單的查看圖片程序

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章