实现JavaScript图片resize功能时Canvas调用drawImage报错求助

你代码中drawImage方法第一个参数传入了FileReader实例，不符合API要求，该参数只支持HTMLImageElement、HTMLCanvasElement等图片类型对象，所以触发了类型错误。

$(document).ready(function() {
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                // 先创建Image对象加载图片
                var img = new Image();
                img.src = e.target.result;
                img.onload = function() {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    canvas.width = 300;
                    canvas.height = 234;
                    // 传Image对象给drawImage
                    ctx.drawImage(img, 0, 0, 300, 234);
                    // 把canvas处理后的图片赋值给页面展示元素
                    $('.profile-pic').attr('src', canvas.toDataURL('image/jpeg'));
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

你原HTML的input标签写了两个重复的id属性id="formFile"和id="avatar-2"，不符合规范，建议删除其中一个，修改后示例：

<div class="upload-button" id="imageresize"><img class="profile-pic"  src="../images/add-image.png" /></div>
<input id="avatar-2" class="file-upload" type="file" name="my_file"  accept="image/*">

内容的提问来源于stack exchange，提问作者Noufal Binu