javascript - 发布由 createObjectURL() 创建的图像

Question

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

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

此代码生成图像。

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

        var img = document.getElementById('image');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response); // this one created the image.

我想读取数据来发布它。我尝试将其附加到文件(不起作用)，尝试从图像读取二进制文件(不起作用 - 图像是本地 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();  

<img id="image" />

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

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

Answer 1

要通过 POST 发送图像，请直接发送 blob，感谢 FormData API
要将 blob 转换为 dataURI，请使用 FileReader
但在您的情况下，应该首选 FormData 方法。

关于使用 Canvas 的注意事项:这将解码图像，然后使用不同的算法重新编码。输出不会是相同的图像。