Question

我根本不寻找任何代码，只是寻找智能人士的反馈，这些反馈在本网站上通常非常有用。

说我有这样的图像：

我希望在我的网站上显示该图像，并为用户提供更改眼睛颜色和头发颜色的选项（选择或单选按钮）。

因此，图像将从蓝眼开始，我有一个眼睛颜色的选择列表：

布朗绿色蓝色淡褐色

如果用户选择绿色，我希望图像现在有绿眼睛。

我的问题：你认为最好的办法是什么？我觉得我的选择是......

使用面部的SVG并以某种方式触发对构成眼睛颜色和头发颜色的路径的更改。这是可行的，但可能过于复杂？
为每个组合创建单独的PNG（红色头发/蓝色眼睛，红色头发/绿色眼睛等），并在每次进行不同选择时更改图像。
如果让它们完美地圆形，也许可以使用CSS更新眼睛？猜猜头发是不可行的。
我可能缺少的其他一些方法???

有什么想法？该网站可能会有很多流量，所以我非常关心我使用的方法是最不密集的（如果可能的话）

Answer 1

您将使用多个svgs，它们将彼此叠加。然后使用javascript你可以修改颜色并用不同的变化替换svg的内容。

你会有不同的头发，眼睛，嘴唇，脸，鼻子，耳朵等层。用户可以一次只更改一个项目，并且它会影响一个图层。

一旦用户满意，他会点击保存，然后你可以用json格式保存所有图层的信息，这样就可以重新创建它，但如果你想要，你也可以将它转换为png。

这样做的一种方法是：Drawing an SVG file on a HTML5 canvas

但理想情况下，我希望后端只获取下面的配置信息并在那里构建图片。

 {
  face: {
    eyes: 3,
    nose: 1,
    hair: 4,
    skin: 3
  },
  colors: {
    eyes: 3,
    general: 1,
    nose: 4
  },
  accessories: [{
    {
      name: 'hat',
      x: 30,
      y: 10,
      type: 3
    }, {
      name: 'sticker_star',
      x: 20,
      y: 10,
      type: 1
    }, {
      name: 'glasses',
      x: 550,
      y: 30,
      type: 1
    }
  }]
}

Answer 2

我还不能对问题发表评论，所以我会在这里写下一些我的想法。

通过SVG执行此操作很有趣，我觉得这将是一个你应该研究更多的途径。我只使用SVG做了一些小事，所以我绝不是专家。使用SVG而不是像你的多个PNG想法这样的主要好处就是性能，因为SVG通常非常小。

制作多个PNG也不是一个坏主意，但绝对不是您的最佳解决方案。然而，利用当今的技术，以及一些前端材料（AngularJS，Ajax等）的速度可以极快地提供图像。如果您希望快速开发，这种方法可能是您最好的选择。

旁注：请查看webkits以便为您执行此操作。 Webkits更新，因此很多浏览器都不支持它们。 Webkits通常也是通过图像过滤器或某种类型的过滤器预定义的，所以我不确定你会有如你所想的那样多的定制。

我希望这有帮助！

Answer 3

我认为改变眼睛颜色的最佳方法是选项1.

对SVG的部分更改是低密集的。

要做到这一点，一个选项是分配一个＆＃39; id＆＃39;对于面的每个动态SVG部分，并创建单独的可更新函数以触发更改。

这种方法带宽较低（只需几行javascript），可以在客户端完成，无需向服务器发送额外请求。

以下是代表眼睛的SVG圆圈的粗略示例，请注意id =＆＃39;眼睛＆＃39;：

<svg width="100" height="100">
   <circle id="eyes" cx="50" cy="50" r="40" fill="yellow" />
</svg>

然后，您可以创建一个输入（选择器，复选框，按钮等）以使用其ID找到SVG元素，然后将其颜色填充样式属性从绿色更改为棕色，淡褐色或蓝色。以下是一个按钮的示例，该按钮可将填充更改为淡褐色＆＃39; onclick＆＃39;：

<button onclick=eyes.style.fill="hazel">Click to change eyes to Hazel</button>

这只是完成此过程的一种方式。然后，您可以为＆＃39; onclick＆＃39;创建一个完整的功能。触发您将用HTML创建的选择列表。

Answer 4

我猜你刚回答了自己。所有3个选项都可以满足您的需求。

您可以使用CSS过渡触发任何SVG的fill和outline。它并不复杂，因为你只使用内联SVG（我不知道是否有一个选项可以在背景SVG上改变填充颜色）。
PNG是位图图像，因此具有更好的细节级别。需要注意的是需要使用大量文件 - 因此需要更多的http请求，除非你使用精灵。
在这种情况下，即使您只是计划在眼睛上使用它，CSS也可能很棘手。

您可以尝试使用CSS3过滤器，例如：

.eyes {
    filter: saturate(1);
    filter: hue-rotate(0deg);
    filter: brightness(1);
}

当然还有其他CSS过滤器。但我想上面的3个可能有所帮助。

如何动态更改图像某些部分的颜色？

4 个答案: