TransWikia.com

How can I convert image buffer to string base64?

Stack Overflow Asked by user557657 on December 13, 2021

enter image description hereI am uploading image using Filepond library to MongoDB using Mongoose. I want to show the image in the map’s marker using pop-up feature. Image I am getting back in the format

{ location:
   { type: 'Point',
     coordinates: [ -86.34164, 39.81514 ],
     formattedAddress: 'Lucas Oil Raceway, Brownsburg, IN 46234, US' },
  _id: 5f10a1867435d3f048a14acc,
  storeId: '009',
  dateCompleted: 2020-07-01T04:00:00.000Z,
  description:
   ' setup datguard. backups, flashack logs  and monitoring',
  createdAt: 2020-07-16T18:50:46.997Z,
  storeImage:
   Binary {
     _bsontype: 'Binary',
     sub_type: 0,
     position: 3569671,
     buffer:
      <Buffer ff d8 ff e0 00 10 4a....
storeImageType: 'image/jpeg',
  __v: 0 }

I am able to show rest of the properties except image. Is there a way i can convert this image buffer to string and then set to map properties.

stores = data.data.map(store => {
        return {
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [
                    store.location.coordinates[0],
                    store.location.coordinates[1]
                ]
            },
            properties: {
                storeId: store.storeId,
                dateCompleted: store.dateCompleted,
                description: store.description,
                         
          image:`data:${store.storeImageType};charset=utf-8;base64,${store.storeImage.data.toString('base64')}`,

##with this i see image content as "data:image/jpeg;charset=utf;base64,233,4444,555,67
icon: ‘shop’
}
};
});

function setMarkers(stores) {
    //add markers to the map
    stores.forEach(function (marker) {

        // create a HTML element for each feature
        var el = document.createElement('div-marker');
        el.className = 'marker';

        // make a marker for each feature and add to the map
        var mkr = new mapboxgl.Marker(el)
            .setLngLat(marker.geometry.coordinates)
            .setPopup(new mapboxgl.Popup({
                    offset: 25
                }) // add popups this is where i need to set image
                .setHTML("<img src='" + marker.properties.image + "' width='160' />"))
            .addTo(map);
        mkrs.push(mkr);
    });
}

All this code is in public javascript folder using NodeJS Express.

One Answer

From the format you posted, it seems like the image buffer is located in store.storeImage.buffer. storeImage.data must be a getter that is converting it to something else - from the looks of it, probably an array?

Try using store.storeImage.buffer.toString('base64') - passing 'base64' to toString is a feature of buffers specifically, other types don't handle it the same.

Edit: Apparently store.storeImage itself is the buffer. So you should use simply store.storeImage.toString('base64')

Edit: Apparently it describes itself as a buffer despite not actually offering a node.js Buffer object. I suggest converting the array to a buffer and then encoding as base64: Buffer.from(store.storeImage.data).toString('base64')

Answered by Klaycon on December 13, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP