javascript - 使用 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 的最终结果)

要运行该示例，请克隆 repo:

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

更改目录:

cd merge-images-example

然后安装依赖:

yarn install

然后运行开发服务器:

yarn dev

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

选项 2 :
您可能希望从本地服务器为它们提供服务，例如 AvatarFromLocalServer。带有 Webpack Dev Config 的组件.然后你会检索 stored strings来自 API和 pass them down into from state into the component .再一次，这仍然需要图像存在于 images 中。文件夹，但更重要的是，它不适合生产环境，因为 images文件夹 must be placed outside的 src要送达的文件夹。这也可能导致安全问题。因此，我根本不推荐这个选项。

选项 3:
与选项 1 相同，但像 AvatarFromLazyFiles 一样延迟加载组件，因此灵活。您可以通过他们的 name 加载图像;但是，它仍然要求所有图像在运行时和生产编译期间都存在。换句话说，你手头上的东西就是你得到的东西。

选项 4 :
所以...理想的选择是建立一个 image microservice或使用 CDN处理所有图像(上传、操作/合并和提供图像)。客户端只能选择/上传新图像到这个微服务/CDN，而微服务/CDN 处理其他所有事情。这可能需要更多的工作，但提供了 most flexibility , super easy至 implement和最佳性能——因为它将所有工作从客户端转移到专用服务。

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