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

我不是在寻找任何代码，只是在寻找聪明人的反馈，这些人在这个网站上通常非常有用

假设我有这样一个图像：

我想在我的网站上有这个图像，用户可以选择改变眼睛颜色和头发颜色（选择或单选按钮）

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

棕色的 绿色 蓝色 榛子

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

我的问题：你觉得处理这类事情的最佳方式是什么？我觉得我的选择是

使用面部SVG，以某种方式触发对构成眼睛颜色和头发颜色的路径的更改。这是可行的，但可能过于复杂

为每个组合（红头发/蓝眼睛、红头发/绿眼睛等）创建单独的PNG，并在每次进行不同选择时更改图像

如果我把眼睛弄得很圆，也许可以用CSS更新眼睛？我猜这对头发来说是不可行的

我可能错过的其他方法

---

有什么想法吗？这个网站可能会有很多流量，所以我肯定会考虑让我使用的任何方法都是最不密集的（如果可能的话）

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

通过SVG实现这一点很有趣，我觉得这将是一个你应该进一步研究的途径。我只使用SVG做了一些小事情，所以我绝对不是专家。与您的多PNG想法相比，使用SVG的主要好处实际上是性能，因为SVG通常非常小

制作多个PNG也不是一个坏主意，但绝对不是您的最佳解决方案。然而，随着当今技术的发展，以及一些前端材料（AngularJS、Ajax等）的速度，图像的制作速度变得非常快。如果您希望快速开发此功能，此方法可能是您的最佳选择

旁注：查看webkits也可以为您做到这一点。WebKit较新，因此许多浏览器不支持它们。WebKit通常也是通过图像过滤器或类似的东西预定义的，所以我不确定您是否会有像您所期望的那样多的定制

---

我希望这有帮助

您将使用多个SVG，这些SVG将层叠在彼此之上。然后使用javascript可以修改svg的颜色，并用不同的变体替换svg的内容

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

一旦用户满意，他会单击save，然后您可以将所有层的信息以json格式保存，这样就可以随时重新创建，但如果您需要，也可以将其转换为png

一种方法是：

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

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

---

我认为改变眼睛颜色的最好方法是选择1

对SVG的部分更改是低强度的

为此，一个选项是为面的每个动态SVG部分分配一个“id”，并创建单独的可更新函数来触发更改

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

下面是一个表示眼睛的SVG圆的粗略示例，请注意id='eyes'：

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

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

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

单击可将眼睛改为淡褐色

---

这只是通过演示过程来完成的一种方法。然后，您可以为“onclick”创建一个完整的函数，从而触发您将在HTML中创建的选择列表。

我想您刚才回答了自己的问题。所有3个选项都能满足您的需求

您可以使用CSS转换触发任何SVG的

填充

和

大纲

。这并不复杂，因为您只使用内联SVG（我不知道是否有在背景SVG上动态更改填充颜色的选项）

PNG是位图图像，因此具有更好的细节级别。需要注意的是，除非使用sprite，否则需要使用大量文件，从而产生更多的http请求

在这种情况下，即使你打算只用眼睛来使用CSS，它也可能很棘手

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

.eyes { filter: saturate(1); filter: hue-rotate(0deg); filter: brightness(1); } .眼睛{ 过滤器：饱和（1）； 过滤器：色调旋转（0度）； 滤光片：亮度（1）； }

---

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

如果您使用的是画布，我最近看到了一个非常酷的托盘交换演示。它的一个简单版本可以应用于交换托盘以重新定义颜色。签出：我同意使用配置文件来存储所选选项。我肯定要保存信息，以便以后可以重新创建图像。您是说要将信息保存到数据库（我使用php/mysql，这样很容易实现）还是以其他方式保存（对不起，我想我对将其保存到@zsawaf提到的“配置文件”的想法感到困惑）您将信息保存到数据库中。然而，正如我所说，您可以通过两种方式使用此信息：1）每次都从信息中重新创建化身。2） 仅在编辑模式下重新创建头像，其他地方使用您使用设置生成的图片。要获得图片，有两种方法a）在客户端生成图片，或b）在服务器端生成图片。（i）第