Question

我有一组存储在/private子目录中的图像，我试图检索服务器方法中的数据并将数据发送回客户端进行显示。

我该怎么做？

我在test.png内有一个名为/private/photos的图片。这是我尝试过的。

/client/test.js

Template.test.onRendered(function () {
    Meteor.call('returnPhoto', 'photos/test.png', function (e, data) {
        console.log(data);
        console.log(window.btoa(data));
        $('#imgContainerImg').attr('src', 'data:image/png;base64,' + window.btoa(data));
    });
})

/server/methods.js

returnPhoto: function (assetPath) {
  return Assets.getText(assetPath);
  return Assets.getBinary(assetPath);
}

我尝试了Assets.getText和Assets.getBinary，第一个给了我一些二进制乱码，第二个给了我一组数字。无论如何使用btoa功能都不起作用。

我查看了CollectionFS包，但我不需要上传图片并将它们全部存储在一个集合中。我希望这些图像在我放入该目录后立即可用，而无需拨打myFSCollection.insert。

Answer 1

使用以下内容，我能够从私有目录中获取图像，将其作为字节数组发送到客户端，然后将其转换为base64字符串并显示为数据URL。

<强>的客户机/ test.js

Template.test.onRendered(function () {
    Meteor.call('returnPhoto', 'photos/test.png', function (e, data) {
        var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(data)));
        $('#imgContainerImg').attr('src', 'data:image/png;base64,' + base64String);
    });
})

服务器/ methods.js

returnPhoto: function (assetPath) { return Assets.getBinary(assetPath); }

Answer 2

这是我使用的解决方案：

<强>的客户机/ main.js

const imagesLookup = new ReactiveDict();
Template.registerHelper('img', function(src) {
  Meteor.call('image', src, (err, img)=> {
    imagesLookup.set(src, img);
  });
  return imagesLookup.get(src);
});

<强>的客户机/ main.html中

<template="stuffWithImage">
  <!-- src is the path of the image in private -->
  <img src="{{img src}}"/>
</template>

<强>进口/ methods.js

Meteor.methods({
  image(src){
    //validate input and check if use is allowed to see this asset
    if(Meteor.isClient){
      //return some loading animation
    }
    const buffer = new Buffer(Assets.getBinary(src), 'binary');
    const magicNumber = buffer.toString('hex',0,4)
    const base64String = buffer.toString('base64');
    return `data:image/${getImageType(magicNumber)};base64,${base64String}`;
  }
});

function getImageType(magicNumber){
  if (magicNumber === 'ffd8ffe0') {
    return 'jpeg';
  }
  //check for other formats... here is a table: https://asecuritysite.com/forensics/magic
}

在Meteor中显示private子目录中的图像

2 个答案: