HTML5 Canvas顯示本地圖片實例1、Canvas預覽圖片實例1

1.前台代碼：

    <input  id="fileOne" type="file" />
    <canvas id="canvasOne" class="myCanvas" width="500" height="500"></canvas>
    <script >
        //讀取本地文件
        var inputOne = document.getElementById('fileOne');
        inputOne.onchange = function () {
            //1.獲取選中的文件列表
            var fileList = inputOne.files;
            var file = fileList[0];
            //讀取文件內容
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //將結果顯示到canvas
                showCanvas(reader.result);
            }
        }
        //指定圖片內容顯示
        function showCanvas(dataUrl) {
            console.info(dataUrl);
            var canvas = document.getElementById('canvasOne');
            var ctx = canvas.getContext('2d');
            //加載圖片
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0, img.width, img.height);
            }
            img.src = dataUrl;
            // document.body.appendChild(img);
        }
    </script>