当我对我有
的路线发帖请求时/generate/image
我得到的结果是:var file =
����JFIF��C��C��� ��
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...
在客户端我做:
var blob = new Blob([file], {type: 'image/png'});
var reader = new FileReader();
reader.onload = function (e) {
$('#result').attr('src', e.target.result);
};
reader.readAsDataURL(blob);
但我得到了一张腐败的图片
我能做什么?
编辑: 如果我做了
img.src = 'data:image/png;base64,' + btoa(file);
我得到:
Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
答案 0 :(得分:2)
请不要使用base64和wast带宽+ CPU 按原样发送图像二进制文件并使用Ajax正确处理它们。 你不应该把结果作为字符串。将xhr responseType设置为blob或使用fetch的blob方法。
fetch("/generate/image").then(res => res.blob())
如果你有blob,请不要使用文件阅读器将其转换为网址。
使用URL.createObjectURL(blob)
答案 1 :(得分:1)
在您的后端,您可以执行以下操作:
var fs = require('fs');
fs.readFile(path to image from you file, 'base64', function(err, buf){
/* Here you can send your base64 image data to client. Your base64 data is in buf.
I am using socket. You can just send. Read more about readFile function*/
socket.emit('image upload', { image: true, buffer: buf });
});
当我的客户端从套接字接收数据时,我调用了一个函数:
socket.on('image upload', function(data){
displayImage(data);
});
var displayImage = function(data){
var URL = 'data:image/jpg;base64,'+data.buffer;
document.querySelector('#img-id').src = URL;
};
然后图像将以img标签显示。 希望这对你有用。