为什么这个脚本会给我一个类型错误？函数获取javascript本地存储中的图像

我制作了一个脚本，它从表单输入中获取一个图像，并准备将其放入javascript localstorage中。脚本如下：

    bannerImage = document.getElementById('image');
    imgData = getBase64Image(bannerImage);

    function getBase64Image(img) {
        // Create an empty canvas element
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;

        // Copy the image contents to the canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        // Get the data-URL formatted image
        // Firefox supports PNG and JPEG. You could check img.src to guess the
        // original format, but be aware the using "image/jpg" will re-encode the image.
        var dataURL = canvas.toDataURL("image/png");

        return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
    }

    // Create new JSON entry
    var json_entry = {'title': titleField.val(),
                        'image': imgData,
                        'content': contentField.val(),
                        'location': location};

问题是我在提交表单时出错：

[Error] TypeError: Type error
getBase64Image (script.js, line 138)
submitForm (script.js, line 128)
dispatch (jquery.min.js, line 3)
i (jquery.min.js, line 3)

错误产生的线是

ctx.drawImage（img，0，0）

我做错了什么？
bannerImage

的值是多少？它是一个文件输入字段

drawImage

要求它是

img

元素。From:规范允许任何图像元素（即、、和），但如果我选择图像作为输入字段的值，它应该可以正常工作？如果没有，我如何才能使这项工作？