Unable to produce image from base64 in nodejs

Question

This is byte array response I am getting from google api contact-photo:

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

I am trying to convert to base64 in nodejs:

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

which produces the following 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==',

However, assigning this to <img src="base64 data here"/> doesn't generate image.

Here is the google api example: https://developers.google.com/google-apps/contacts/v3/#retrieving_a_contacts_photo

What am I doing wrong?

Answer 1

JFIF suggests you're actually converting a .jpg file, not a .png.

Make sure the file type (e.g. .png) matches the Mime type (e.g. "image/png").

Also consider specifying charset.

SUGGESTED CHANGE:

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

when you try to do only get a request without specifying the encoding type for an image which is coming from the third party, then the response of the body will be the raw data which you are getting in bytearray variable , so you have add header encoding: "binary" so the response will come in binary format and then you use Buffer and BUffer.from to convert that binary data to base64 and use it in your <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);
        }
    })
}

when use promise

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

there is one node module also for this form where i got the solution https://www.npmjs.com/package/imageurl-base64

if you want to read the image form your local disk the fs module help you

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