从本机上选择图片文件，怎样才能让图片到画布上？我代码是哪里出错了，在网上没搜到相关代码案例

Question

var img = new image();//var 声明关键字
//解决跨域问题
img.crossOrigin = "Anonymous";

//img.src="timg.jpg";
var canvas;
var ctx;
//图片加载完成触发
img.onload = function () {
var file = $("#imgForm").find("input")[0].files[0];
var reader = new FileReader();
var imgFile;
reader.onload = function (e) {
alert('文件读取完成');
imgFile = e.target.result;
console.log(imgFile);
$("#imgContent").attr('src', imgFile);
};
reader.readAsDataURL(file);

  canvas = document.getElementById("myCanvas");
  img.height = 0.4 * img.height;
  img.width = 0.4 * img.width;
  canvas.width = img.width;  
  canvas.height = img.height;  
  ctx=canvas.getContext("2d");
  ctx.drawImage(img,0,0,img.width,img.height);

}

Answer 1

 <input type="file" id="f" onchange="fileLoad()">
    <div>
        <canvas id="draw"></canvas>
    </div>
    <script>
        function fileLoad() {
            var f = document.getElementById('f').files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                alert('文件读取完成');
                var imgFile = e.target.result;
                var img = new Image();
                img.onload = imgLoad;
                img.src = imgFile;
            };
            reader.readAsDataURL(f);
        }
        function imgLoad(){
            console.log('image loaded');
            var canvas = document.getElementById("draw");
            var ctx = canvas.getContext("2d");
            var height = 0.4 * this.height;
            var width = 0.4 * this.width;
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(this, 0, 0, width, height);
        }
    </script>