从 python 中的 HTTP POST 请求解码图像答案

【问题标题】：Decode image from HTTP POST request in python从 python 中的 HTTP POST 请求解码图像
【发布时间】：2020-02-20 16:57:55
【问题描述】：

我正在将图像从我的 HTML-JS 前端发送到我的 Python 后端。下面是我的JS代码：

var formData = new FormData();
formData.append("a", file);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
    if(this.readyState === 4) {
        log(this.responseText);
    }
});

xhr.open("POST", "http://localhost:8088");

xhr.send(formData);

在我的后端，我使用 BaseHTTPServer 来接收这张图片

self.send_response(200)
self.send_header('Access-Control-Allow-Origin', 'http://localhost:8887')
self.send_header("Access-Control-Allow-Credentials", "true")
self.end_headers()
form = cgi.FieldStorage(
        fp=self.rfile,
        headers=self.headers,
        environ={"REQUEST_METHOD": "POST",
                 "CONTENT_TYPE": self.headers['Content-Type']})
image = form.getvalue("a")
bytes_array = []
for i in range(90000):
    try:
        bytes_array.append(image[i])
    except:
        print(i)
        break
print(bytes_array)

我面临的问题是我的 image 变量的一部分看起来像：

<?xpacket begin=\'\xef\xbb\xbf\' id=\'W5M0MpCehiHzreSzNTczkc9d\'?>\r\n<x:xmpmeta xmlns:x="adobe:ns:meta/"><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about="uuid:faf5bdd5-ba3d-11da-ad31-d33d75182f1b" xmlns:dc="http://purl.org/dc/elements/1.1/"/><rdf:Description rdf:about="uuid:faf5bdd5-ba3d-11da-ad31-d33d75182f1b" xmlns:dc="http://purl.org/dc/elements/1.1/"><dc:creator><rdf:Seq xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:li>Bankar, Pranit</rdf:li></rdf:Seq>\r\n\t\t\t</dc:creator></rdf:Description></rdf:RDF></x:xmpmeta>\r\n

和

<?xpacket end=\'w\'?>

这会在我的bytes_array 中创建垃圾值。

发送图像文件以便提取像素值的正确方法是什么？

【问题讨论】：

标签： javascript python image xmlhttprequest basehttpserver

【解决方案1】：

我通过以下方式修改了我的 JS 文件：

let b64_data;

function handleFileSelectTest(event){
  //Change event for image file upload

    img = document.getElementById('img');
    file = event.target.files[0];
    img.src = URL.createObjectURL(file);
    img.onload = function(){
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
        canvas.height = img.naturalHeight;
        canvas.width = img.naturalWidth;
        ctx.drawImage(img, 0, 0);

        var uri = canvas.toDataURL('image/png'),
        b64_data1 = uri.replace(/^data:image.+;base64,/, '');
        b64_data = b64_data1;
    }
}

和

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
    if(this.readyState === 4) {
        log(this.responseText);
    }
});
xhr.open("POST", "http://localhost:8088");
//console.log(b64_data);
xhr.send(b64_data);

我还将我的python代码修改为：

self.send_response(200)
self.send_header('Access-Control-Allow-Origin', 'http://localhost:8887')
self.send_header("Access-Control-Allow-Credentials", "true")
self.end_headers()
content_len = int(self.headers.get('Content-Length'))
post_body = self.rfile.read(content_len)

print(post_body)
data = base64.b64decode(post_body)
with open("imageToSave1.png", "wb") as fh:
    fh.write(base64.decodebytes(post_body))
ans="a b c"
self.wfile.write(ans.encode())

【讨论】：