将图像二进制数据转化为img标签 [英] turn image binary data into img tag

问题描述

当我向一条路线发出一个发布请求时，我有

  / generate / image 
  

我得到类似于：var file =

     JFIF  C  C      $ b $b     + }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）; 
  

但我得到一个损坏的图像

我可以做什么？

编辑：
如果我这样做

pre $ code> img.src ='data：image / png; base64，'+ btoa（file）;

我得到：

 未捕获InvalidCharacterError：无法在'Window'上执行'btoa'：要编码的字符串包含Latin1范围之外的字符。 
  

解决方案

在您的后端，您可以执行以下操作：

  var fs = require（'fs'）; 
 fs.readFile（你的文件的路径'base64'，function（err，buf）{
 / *）这里你可以发送你的base64图像数据到客户端，你的base64数据是buf。 
我正在使用套接字，您可以发送。阅读更多关于readFile函数* / 
 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标签中。
希望这对您有用。

When i do a post request to a route i have

/generate/image

i get something like: var file =

����JFIF��C��C��� ��    
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...

in the client i do:

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

but i get a corrupt image

what can i do?

EDIT: if i do

img.src = 'data:image/png;base64,' + btoa(file);

i get:

Uncaught InvalidCharacterError: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

解决方案

At your backend you can do following:

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

As my client receives data from socket, I call a function:

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;
            };

The image will then be showed in img tag. Hope this works for you.

这篇关于将图像二进制数据转化为img标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！