当我尝试通过FileReader将图像上传为画布时，我需要上传两次，否则它是一张空白图像

Question

我尝试使用FileReader（）上传图片并将其转换为base64。这仅在我上传图像两次后才有效，否则会发布空白的画布/图像。

这是我的意见：

 <input type="file" id="file" class="file"/><canvas id="canvas"></canvas>

这是FileReader（）：

        var file = document.querySelector('input[type=file]').files[0];
        var fr = new FileReader();
        fr.onload = createImage;   // onload fires after reading is complete
        fr.readAsDataURL(file);    // begin reading

        function createImage() {
            img = new Image();
            img.onload = imageLoaded;
            img.src = fr.result;
        }

        function imageLoaded() {
            var canvas = document.getElementById("canvas")
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img,0,0);
        }
        var img64 = canvas.toDataURL().split(",")[1];
        var params = {
            "media_data": img64
        };