Javascript 在python中解码HTTP POST请求中的图像
我正在将一个图像从HTML-JS前端发送到Python后端。下面是我的JS代码:Javascript 在python中解码HTTP POST请求中的图像,javascript,python,image,xmlhttprequest,basehttpserver,Javascript,Python,Image,Xmlhttprequest,Basehttpserver,我正在将一个图像从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) {
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)
我面临的问题是,我的图像
变量的某些部分看起来像:
<?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
\r\n银行,普拉尼特\r\n\t\t\t\r\n
及
这会在我的字节数组中创建垃圾值
发送图像文件以便提取像素值的正确方法是什么 我以以下方式修改了我的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;
}
}
及
我还将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())
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);
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())