html5中canvas绘制图片问题

我想是,上传图片,然后先在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
            };
        }
    }

图片说明

1个回答

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

javascript客户端图片预览

zhdamsj
笨小迪 哥,其实我还想做图片的裁剪,所以就想着用canvas
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐