html5中canvas绘制图片问题

Question

我想是，上传图片，然后先在canvas里面预览，然后确定了之后再提交上去，但是把图片绘制到canvas里面的时候出了点问题，麻烦各位大神帮我看看是怎么回事，感激不尽！

    var a = inputObj.files[0];
    if(isAvaiable() && isImage(a))
    {
        var b = new FileReader;
        b.readAsDataURL(a);
        b.onload = function (e) {
            var image = new Image;
            image.src = e.target.result;
            image.onload = function () {
                console.log("canvas's width : " + edgeLen + "\n");              //canvas是正方形的，edgeLen是它的边长，打印出来是421
                console.log("image's width : " + image.width + "\n");           //图片宽度，打印出来是1024
                console.log("image's height : " + image.height + "\n");         //图片高度，打印出来是768
                console.log("changed image's height : " + image.height * edgeLen / image.width + "\n");//根据比例来算出画在canvas上面高度，打印出来是315.75
                var ctx = drawObj.getContext("2d");
                var imgWidth = image.width;
                var imgHeight = image.height * edgeLen / imgWidth;
                ctx.drawImage(image, 0, 0, edgeLen, imgHeight);//用这个画，出来的图像像是在图片上从0,0开始截了一部分出来
                //ctx.drawImage(image, 0, 0, edgeLen, 149.5);//用这个画就能全部显示出来，并且占满整个canvas
            };
        }
    }

Answer 1

看这个示例，图片预览而已不需要canvas，而且ie8-不支持canvas

javascript客户端图片预览