Why does this script give me a type error? Functio

问题:

I made a script which takes an image from a form input and prepares it to be put in javascript localstorage. The script is below:

    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};

The problem is that I get an error when i submit the form:

[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)

The line from the error is ctx.drawImage(img, 0, 0);

what am I doing wrong?