发布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方法。

关于使用画布的注释：这将解码图像，然后使用不同的算法重新编码。输出不会是相同的图像。

Answer 2

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();