Javascript 当我试图通过FileReader将图像作为画布上传时，我需要上传两次，否则会发布一个空白图像

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

这是我的意见：

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

---

可能重复Hey您不能使用filereader将svg转换为base64并在img标记中显示它仅适用于png、jpg、jpeg这些类型在仅为load事件分配处理程序函数后立即调用readAsDataURL，但第一次此事件仅在稍后发生，因为浏览器尚未缓存图像。您需要读取onload处理程序函数中的图像；这是一种非常类似于复制的异步行为，因此请检查以了解进一步的解释。@CBroe问题是，他/她在onloads事件之前调用

toDataURL

，其他一切正常。要进行操作，应在

imageLoaded

的末尾进行此调用。奇怪的是，您第二次得到它，因为

canvas

应该在该范围内未定义。

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