Question

我正在使用Mongoose使用Filepond库将图像上传到MongoDB。我想使用弹出功能在地图的标记中显示图像。图片以格式重新显示

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

我能够显示除图像以外的其他属性。有没有一种方法可以将图像缓冲区转换为字符串，然后设置为地图属性。

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')}`,

##与此相关，我将图像内容视为“ data：image / jpeg; charset = utf; base64,233,4444,555,67 图标：“商店” } }; }）;

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

所有这些代码都在使用NodeJS Express的公共javascript文件夹中。

Answer 1

根据您发布的格式，图像缓冲区似乎位于store.storeImage.buffer中。 storeImage.data必须是将其转换为其他东西的吸气剂-从它的外观，可能是数组？

尝试使用store.storeImage.buffer.toString('base64')-将'base64'传递到toString是缓冲区的一项特定功能，其他类型的缓冲区则不能完全相同。

编辑：显然store.storeImage本身就是缓冲区。因此，您应该只使用store.storeImage.toString('base64')

编辑：显然，尽管没有实际提供node.js Buffer对象，但它仍将自己描述为一个缓冲区。我建议将数组转换为缓冲区，然后编码为base64：Buffer.from(store.storeImage.data).toString('base64')

如何将图像缓冲区转换为字符串base64？

1 个答案: