无法从nodj中的base64生成图像

Question

这是我从Google api联系人照片获得的字节数组响应：

console.log（'byteArray：'，res1.body）;

 ����JFIF��``"����?  !1AQaq2B���"#RT����br��3����������0    !1A2Qaq�"��BRS�����
                                                                     ?���Kѐ�V��,���fu0�AկQ�w���y�
                                                                                                        x��i�|��F?���;҆�X����������(+:s��iud���c�Gf�e7�jI�;N�d�%�f����+�Uh4q;Ĭ!9ȨD��[��5�ކ�;h��gCt�͌��و1J��q�a��S��^�V��R�����U��K6�<��"�U��~"u�|Q
ڵ��G���;}�ђ׊��<���sX���>j���hk���~+�^����3�q4��P؝�oZ������4��P{O-j�]�d�c��pG��<7��Q������zd{n��|�`�mɊ��SN�D����}�Hv��0PY�<\�#�T�k!0�R(�Um�n��e�>�a욶˽�8P����{�)���"�
�4��}����6�`���T��!wY�� ��4�y�����+�A]U�M�ֻ⼪�d�N��EcQ`a�u�R��
                                                                  �
                                                                   Z"�e/���;-�vL�<c���IH"W2Ga���Ӄ⬨�cݻ#q��c�Y䣃F�G�$�0:�z�"   1��
                                                                                                                                   �S�R�WCh��a���@%#��$�i�y�
            u��[�6Ή����(c�Sw˻�G��X3����R��n'�m+>����'
                                                        �/;�%�k�4��Z�/l^�z�/l^�z��Z�}k^��!������O����������Dzx�"��>��û#>�#\~{�L-D�k��T�L�����({�TAr9����g}׎��y�{Լ�.�у�8���^��6��"9+��k��K�V�6�����p�¦�Y�~%b�F�lX����_���v����_�O����A�+�G��e]Q*���z��G|�Y{��f��Y�CI�qu*p�v�T�Z�%*R�Kx��c��Is�D�Y�-���O$��!�`��4M���VX�@v�g��U�̦��2E�W��s�7=}z#��Ԯ� c���t^��n|R2H΋�� |�����w�k�9��ٵ�o1�U��nC�r@���7���wZ��-�!n����v�p���P�h_dR�����O5�ޟ�
�*"̙����7-rr�{��<��3��#O�S;:/~�"f~Ϋ;IǸ,�V�[K�\���՗c���d4`6��ѣ��Õ]<ϚN��<��r/Fug<֧���ӢуZ�>z�Cܟ{'c��ˏO��jB��o �����c5�:�6:H�Ώ�c�S<�}{���U_c+�T��D����JY�����=v�&5� �ג3䒮i�Wq�#�$J  �ǖ+��4"�FZ��ʗ���ݹ�E�]tV��
!� ��H�Op��)�&���P۷��'�;S�������#�!��/X��GO��iC�8>ȅ:���`$���H��m

我试图在nodejs中转换为base64：

base64Image = new Buffer.from(res1.body).toString('base64');
console.log("data:image/png;base64," + base64Image;)

产生以下base64：

'data:image/png;base64,77+977+977+977+9ABBKRklGAAEBAAABAAEAAO+/ve+/vQDvv70ABQMEDw8NDQ0NEA8ODxANDhAPDw0NDw0QEA8NDg0NDg0NDw8NEA0NDw4NDQ0NFQ0PEhETExMNDRYYFhIYEBITEgEFBQUHBgcPCQkPHBUSFR0VHx0XGB4WHRcXFRUXFR0XGB0dFxUVFRUXFRUXFRUVFRUVFRUXFRUeFRUVFRUVFRUe77+977+9ABEIAGAAYAMBIgACEQEDEQHvv73vv70AHAAAAQQDAQAAAAAAAAAAAAAAAQUGBwgAAgME77+977+9AD8QAAEDAQMIBQkGBwEAAAAAAAEAAgMRBAchBQYSMUFRYXEyQu+/ve+/ve+/vRYiI1JU77+977+977+977+9ExRicu+/ve+/vTPvv73vv73vv73vv73vv73vv70X77+977+9ABwBAAICAwEBAAAAAAAAAAAAAAUGBAcBAggDAO+/ve+/vQAwEQABBAECAwYDCQAAAAAAAAABAAIDBBEFIRIxQQYyUWFx77+9Iu+/ve+/vRQVFkJSU++/ve+/ve+/ve+/ve+/vQAMAwEAAhEDEQA/AO+/ve+/ve+/vUvRkO+/vVbvv73vv70s77+977+977+9ZnUcMO+/vUHVr1Hvv71377+977+977+9ee+/vQt477+977+9ae+/vXzvv73vv70RRj/vv73vv73vv7070obvv71Y77+977+977+977+977+977+977+977+977+977+9KCs6c++/ve+/vWl1ZO+/ve+/ve+/vWMO77+9R2bvv71lNxzvv71qSe+/vTtO77+9ZO+/vSUE77+9Zu+/ve+/vR8A77+977+9K++/vVVoNBxxO8SsIQIWOcioRO+/ve+/vQNb77+9AO+/vTXvv73ehu+/vTto77+977+9ZxxDdO+/vc2M77+977+92YgxSu+/vRHvv71x77+9Ye+/ve+/vVPvv73vv71e77+9Vu+/vQjvv73vv71S77+9f++/ve+/ve+/vQ/vv71V77+977+9Szbvv70877+977+9Iu+/vVXvv73vv70YBn4ide+/vXxRCu+/ve+/vWPvv71G77+9SW9a0KlY77+977+977+9NO+/ve+/ve+/ve+/vVzvv73vv71dS3Dvv70zSyfvv70oI++/vUfvv70c1oBe77+9ZO+/ve+/ve+/vWbvv71GVT0jQ1xAOe+/vVHvv73vv71n77+93aDvv704z6bvv73vv73vv73vv71tf++/ve+/ve+/vWZxJO+/vWpNcTvvv73vv73vv71MV++/ve+/ve+/ve+/vSvvv70NHNq177+977+9R++/ve+/ve+/vTt977+90ZLXihHvv73vv70SPO+/ve+/vRfvv71zWO+/ve+/ve+/vT5q77+977+977+9aGvvv70Y77+977+9fivvv71e77+977+977+977+9M++/vXE077+977+9UB3Yne+/vW9a77+977+9G++/ve+/ve+/ve+/vTTvv73vv71QDntPLWrvv71d77+9ZO+/vWPvv70AA++/vXAGR++/ve+/vTw3Ae+/vRDvv71R77+9He+/ve+/ve+/ve+/ve+/vXpke27vv73vv71877+9YO+/vW3Jigfvv73vv71TTu+/vUTvv73vv73vv73vv71977+9SHYb77+977+9MFBZ77+9PFzvv70j77+9VO+/vWsRITDvv71SKO+/vQBVbe+/vW7vv73vv71l77+9Pu+/vWHsmrbLve+/vThQ77+977+9H++/ve+/vXvvv70p77+977+977+9Iu+/vQvvv73vv73vv707I34sPCvvv73vv71pQe+/ve+/ve+/ve+/vSHvv71u1a1dZu+/vVdl77+9H++/vXHvv73vv70N77+9NO+/vQ7vv71977+977+977+977+9Nu+/vWDvv73vv73vv71U77+977+9IXdZ77+9He+/vSDvv70D77+9NO+/vXkY77+977+977+977+9Au+/vSvvv71BXVXvv71N77+91rsG4ryq77+9ZATvv71O77+977+9RWNRYGHvv71177+9Uu+/vQvvv70LWiLvv71lLwDvv70a77+977+9Oy3vv712TO+/vTxj77+977+9HO+/vUlIIlcyR2Hvv73vv73vv73Tg+KsqO+/vWPduyNx77+977+9Y++/vVnko4NG77+9R++/vSTvv70wOu+/vXrvv70iCQ8x77+977+9DO+/vVPvv71S77+9V0No77+977+9Ye+/ve+/ve+/vUAlI++/ve+/vSTvv71p77+9ee+/vQt177+977+9W++/vTbOie+/ve+/ve+/ve+/vShj77+9BlN3y7sf77+9R++/ve+/vVgz77+977+977+9Ee+/vQBS77+977+9bifvv71tKz7vv73vv73vv73vv70nDO+/vQ4vO++/vSXvv71r77+9NO+/ve+/vVrvv70vbF7vv70feu+/vS9sXu+/vR9677+977+9Wu+/vX1rXu+/ve+/vSHvv73vv73vv73vv73vv73vv71P77+9Fe+/ve+/ve+/ve+/ve+/vRHvv73vv73vv73vv73Hsnjvv70i77+977+9Pu+/ve+/vcO7IxAZDz7vv70jXH5777+9TC1E77+9a++/ve+/vR5U77+9TO+/ve+/vU8977+9Se+/ve+/vVxRHXkk77+9Me+/vSc877+977+9Pe+/ve+/ve+/ve+/ve+/vQB1Uu+/vWLvv70N77+977+977+9KHsS77+9VEFyOe+/ve+/ve+/ve+/vWd9G9eO77+977+9Dgd577+9e9S877+9Lu+/vdGD77+9OO+/ve+/ve+/vQVe77+977+9Nu+/ve+/vSI5GSvvv73vv71r77+977+9S++/vVbvv70277+977+977+977+977+9cO+/vcKm77+9We+/vX4lYu+/vUbvv71sWO+/vRfvv73vv73vv71f77+977+9D++/vXbvv73vv73vv73vv71f77+9T++/ve+/ve+/ve+/vRgaQe+/vSvvv71H77+977+9ZV1RKu+/vRvvv73vv71677+977+9R3zvv71Ze++/vQbvv71m77+977+9We+/vQdDSe+/vXF1KnDvv71277+9VO+/vVrvv70XJREwHO+/vQBKNO+/vWzvv70z77+9yZbvv715Ru+/ve+/ve+/vSLvv70177+9Elzvv70HEkAI3Kfvv73vv73vv70NGSpS77+9S3jvv73vv71j77+977+9SXMG77+9HUTvv70UWe+/vS3vv73vv73vv71PJO+/ve+/vSHvv70FYO+/ve+/vTRN77+9H++/ve+/vVZY77+9QB1277+9Z++/ve+/vVXvv73Mphjvv73vv70XMkXvv71X77+977+9c++/vTc9fXoj77+977+91K7vv70gY++/ve+/ve+/vXRe77+977+9bnxSMkjOi++/ve+/vSB8DwPvv73vv73vv73vv73vv71377+9a++/vTnvv70H77+9A9m177+9bzHvv71V77+977+9bkPvv71yQO+/ve+/vRPvv70eNx3vv73vv73vv713FFrvv73vv70t77+9IRpu77+977+977+977+9du+/vXDvv73vv73vv71Q77+9aF8UZFLvv73vv73vv70O77+9Bu+/vU8SNe+/vd6f77+9DO+/ve+/vTxV77+977+977+977+9De+/vQAqIsyZ77+9GxTvv70F77+977+9Ny1ychLvv71777+9Fe+/vTzvv73vv70VM++/ve+/vSNP77+9ElM7Oi9+77+9GCIAZn7OqztJx7gs77+9VgHvv71bS3YI77+9XO+/ve+/ve+/vdWXY++/ve+/ve+/vWQ0AGA277+977+90aPvv73vv70Zw5VdPM+aTu+/ve+/vTwA77+977+9chgvRnVnPNan77+977+977+906LRg1oP77+9Pnrvv71D3J97JxVjGe+/ve+/vcuPTwTvv73vv71qQu+/ve+/vW8g77+977+977+977+977+9YzXvv70677+9NjpI77+9zo/vv71j77+9Uzzvv719e++/ve+/ve+/vSzvv73vv73vv70abx7vv71fONeq3qt8e1Ftfu+/vWtVIHfvv73vv71aae+/ve+/ve+/vQ8A77+9FzVC77+977+9dsau77+9We+/vTXvv71Ix73vv73vv70AVTYW77+9Xu+/vVZLE2QYKe+/ve+/vUZa77+977+9ypfvv73vv73vv73duRDvv71F77+9XXRW77+977+9DSLvv73vv70gee+/ve+/ve+/vWHvv70UJe+/ve+/ve+/vWjvv73vv73vv73vv73vv709du+/vSYeNRrvv70aIO+/vdeSM+SSrmnvv71Xce+/vSPvv70kSiACIO+/vceWKxfvv70d77+9YAg0IhYNVV9jK++/vVQJRO+/ve+/vRXvv73vv71KWQshTWh277+9Me+/vU4gUe+/ve+/ve+/vRTHmBdI77+977+9Ze+/vREj77+9Ie+/ve+/vQ4dL1jvv73vv71HT++/ve+/vWlD77+9OD7IhToT77+977+977+9YCQb77+977+977+9SO+/ve+/vW0NIe+/vSDvv70b77+9SO+/vU9w77+9Bu+/vSnvv70mUQjvv73vv70A77+9BRdQEdu377+977+9Jxzvv707U++/ve+/ve+/ve+/ve+/ve+/ve+/vQ==',

但是，将其分配给<img src="base64 data here"/>不会生成图像。

这是Google api示例： https : //developers.google.com/google-apps/contacts/v3/#retrieving_a_contacts_photo

我究竟做错了什么？

Answer 1

JFIF建议您实际上是在转换.jpg文件，而不是.png文件。

确保文件类型（例如.png）与Mime类型（例如“ image / png”）匹配。

还可以考虑指定字符集。

建议的更改：

base64Image = new Buffer.from(res1.body).toString('base64');
console.log("data:image/jpeg;charset=utf-8;base64," + base64Image;)
<= Assuming it's really a jpeg file
   Don't forget to make the corresponding change in your HTML, too...

Answer 2

当您尝试仅获取请求而不指定来自第三方的图像的编码类型时，主体的响应将是您在bytearray变量中获取的原始数据，因此您需要添加标头encoding: "binary"因此响应将采用二进制格式，然后您使用Buffer和BUffer.from将二进制数据转换为base64，并在您的<img src"data:image/png;base64,yourbase64data"

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};

    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");//  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            dataUri = prefix + img;
            console.log(dataUri);
        }
    })
}

使用承诺时

function getImage(imageUrl) {
var options = {
    url: `${imageUrl}`,
    encoding: "binary"
};
  return new Promise(function (resolve, reject) {
    request.get(options, function (err, resp, body) {
        if (err) {
            reject(err);
        } else {
            var prefix = "data:" + resp.headers["content-type"] + ";base64,";
            var img = new Buffer(body.toString(), "binary").toString("base64");//  var img = new Buffer.from(body.toString(), "binary").toString("base64");
            dataUri = prefix + img;
            console.log(dataUri); 
            resolve(dataUri);
        }
    })
})}

对于这种形式，我也有一个节点模块，在那里我得到了解决方案https://www.npmjs.com/package/imageurl-base64

如果fs本地磁盘读取映像，则fs模块可以帮助您

 var prefix = "data:" + "content-type" + ";base64,";
 img: fs.readFileSync(`pathtothelocalimage`, 'base64')
 //img: fs.readFile(`pathtothelocalimage`, 'base64')
 dataUri = prefix + img;