Javascript 发布由createObjectURL（）创建的图像

我想读取生成的图像并发送到服务器

<img id="image" src="blob:null/31070c0f-23c0-44b0-945f-57ed1e623350">

我想把数据读出来发布。我尝试将其附加到文件（不工作），尝试从图像读取二进制文件（不工作-图像是本地blob），尝试将图像的src设置为文件（不工作）

}
}
xhr.open（'GET'，'http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.cognation.net/profile');
xhr.responseType='blob'；
xhr.send（）；

这就是图像的渲染方式。我想把它发送到服务器。

---

我尝试了一些方法，但无法回答。

要通过POST发送图像，请直接发送blob，这要感谢

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){               

        var reader = new FileReader();

        reader.onload = function (e) {
            var dataURL = reader.result;
            $("#image").attr("src", dataURL);

            alert($("#ImageTwo").attr("src"));
        }

        var read =   reader.readAsDataURL(this.response);

    }
}
xhr.open('GET', 'http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.cognation.net/profile');
xhr.responseType = 'blob';
xhr.send();  

要将blob转换为dataURI，请使用
但在您的情况下，应该首选FormData方法

---

请注意使用画布：这将解码图像，然后使用不同的算法重新编码。输出的图像将不同。

现在我遇到了这个问题。尝试更正时，dataurl生成空白图像。无法从画布生成图像，它是空白的。您能给我看一下文件读取器以从img标记发送图像吗。@ARUNEdathadan，获取xhr接收到的

blob

（可能仍在

xhr.response

中，但更安全的做法是将其保存在与上载函数相同范围内的变量中）。然后，由于您想要上传此图像，请使用

var form=new FormData（）；append（'file'，blob'，filename.ext'）

然后创建一个POST-xhr，只需调用

postXHR.send（form）

。如果您需要将其存储为dataURI，则在服务器端进行转换。@Aruedathadan有关如何使用FileReader，您似乎能够根据上一个答案的编辑通过MDN进行读取

    }
}
xhr.open('GET', 'http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.cognation.net/profile');
xhr.responseType = 'blob';
xhr.send();  

<img id="image" />

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){               

        var reader = new FileReader();

        reader.onload = function (e) {
            var dataURL = reader.result;
            $("#image").attr("src", dataURL);

            alert($("#ImageTwo").attr("src"));
        }

        var read =   reader.readAsDataURL(this.response);

    }
}
xhr.open('GET', 'http://chart.apis.google.com/chart?cht=qr&chs=200x200&chl=http://www.cognation.net/profile');
xhr.responseType = 'blob';
xhr.send();