使用 Javascript/React 合并图像

Question

我正在创建一个网站，其中每个用户都有一个“头像”。头像有不同的配件，如帽子、面部表情等。我之前在 php 网站上做过这个，但我正在使用 React 创建这个新网站。我正在从 firestore 加载每个用户的头像及其项目链接。我不想使用绝对定位或CSS，我希望头像是一张图像。

我想要实现的目标的示例：

我找到了这个库： https: //github.com/lukechilds/merge-images这似乎正是我所需要的，但我无法加载外部图像，或者收到此错误：

任何对此错误的解决方案或替代方案的建议将不胜感激。

我的代码：

render() {

mergeImages([
  'http://example.com/images/Avatar.png',
  'http://example.com/images/Hat.png',
])
.then((b64) => {
  document.querySelector('img.abc').src = b64;
})
.catch(error => console.log(error))
return (
  ...
      <img class="abc" src='' width={100} height={200} alt="avatar"/>
  ...
); }

Answer 1

该merge-images包有一些怪癖。这些怪癖之一是它期望从本地服务器提供单个图像（例如：http://localhost:3000/images/head.png、http://localhost:3000/images/eyes.png和http://localhost:3000/images/mouth.png），或者将这些单个图像导入到单个文件中。

工作示例： https: //github.com/mattcarlotta/merge-images-example（此示例包括下面解释的前三个选项，第四个选项利用使用第三方 CDN 的最终结果）

要运行该示例，请克隆存储库：

git clone https://github.com/mattcarlotta/merge-images-example

更改目录：

cd merge-images-example

然后安装依赖项：

yarn install

然后运行开发服务器：

yarn dev

选项 1：最简单的实现是将它们导入到AvatarFromFiles组件中。然而，正如所写，它不可重用，也不适合动态选择的头像。

选项 2：您可能希望从本地服务器提供它们，例如带有Webpack Dev Config 的AvatarFromLocalServer组件。然后，您可以从API检索存储的字符串，并将它们从状态传递到组件中。再次强调，这仍然要求文件夹中存在图像，但更重要的是，它对于生产环境来说并不理想，因为该文件夹必须放置在要提供服务的文件夹之外。这也可能导致安全问题。因此，我根本不推荐这个选项。imagesimagessrc

选项 3： 与选项 1 相同，但像AvatarFromLazyFiles组件一样延迟加载，因此灵活。您可以通过名称加载图像；但是，它仍然要求所有映像在运行时和生产编译期间都存在。换句话说，你手头上有什么，你就会得到什么。

选项 4：所以...理想的选择是构建图像微服务或使用CDN来处理所有图像（上传、操作/合并和提供图像）。客户端只能选择/上传新图像到该微服务/CDN，而微服务/CDN 会处理其他所有事情。这可能需要更多的工作，但提供了最大的灵活性、超级容易实现和最佳的性能——因为它将所有工作从客户端转移到专用服务。

总之，除非您计划拥有一定数量的图像，否则请使用选项 3，否则使用选项 4。