javascript - jQuery/Javascript:通过更改选项(例如形状，颜色)自定义图片/头像

Question

许多网站都允许您通过更改选项来自定义图像。

例如，此Barbie website可让您创建自己的芭比娃娃。您可以单击各种发型和衣服，并且单击时主图像会更新。

其他服装网站也做类似的事情。

是否有任何教程向您展示如何使用Java Script或Jquery做到这一点？

理想情况下，我正在寻找可以让您针对不同情况重新使用代码的模板。

我找到了一些教程，但它们都使用PHP：
Bokehman-该网站说它使用Javascript，但实际上使用PHP
Code Canyon-该脚本的模板可轻松交换元素，但再次使用PHP。

我知道Javascript really doesn't support writing files，因此您必须使用PHP解决方案来保存图像。
但是，我只是在寻找创建图像的东西。在此阶段，我不担心节省。

Answer 1

这就是我最终的做法。

1）为每个资产创建一个单独的CSS类。

串联由多个变量组成的资产的类。
创建.input父类以显示选择表单的图像资产。
创建一个.preview子类以在完成的头像上显示图像资产

例如

.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}

.input .input-skin-brown {
background-image(<<image-asset>>);
}

.input .input-hair-style-1 {
background-image(<<image-asset>>);
}


.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}

2）创建HTML。将默认资产选项分配给wrapper元素。

例如

<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">

<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>


<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>

</div>

3）单击输入表单中的选项后，使用Jquery操纵包装器上的类。

例如，如果用户单击hairstyle-2，则包装器中的hairstyle-1类将更改为hairstyle-2

我对此有一个单独的问题：
jQuery: Swap Classes based on Class position

本质上就是全部。一旦编写了CSS类并使用Jquery代码切换了这些类的工作，实际上就非常简单了。
因为您将所有输入都存储为表单，所以当用户单击“提交”时，可以将值发送到另一个进程。

提示：

1）使用SASS / SCSS编写CSS。
您可以创建一个数组并在sass中循环遍历，这使得维护css变得容易。我在这里有一个问题：
Sass: Using two @each lists in SCSS
CSS - SASS: Using @each based mixins to generate multiple backgrounds

2）避免使用CSS Sprite。
尽管Sprite对加载时间有很大帮助，但我认为您会疯狂地尝试维护它（取决于所涉及的资产）。有一些工具可以为您维护它，但是由于这是一个极端的情况，因此我认为这些工具不能很好地工作。

3）加载速度是一个问题
当用户单击头像元素时，CSS加载会短暂延迟。这是一个问题，因为用户认为他们的点击尚未注册。
要解决此问题，请创建一个使用display:none的隐藏div。然后使用CSS3多背景属性将每个资产附加到该DIV（作为背景）。
这样，您的所有资产都将在开始时加载，因此用户单击时不会出现延迟。同样，为此使用SASS循环和数组，因为数组将自动将所有资产添加到隐藏的DIV中。

4）非常仔细地考虑类别和资产名称。
我最初是使用友好的名称（例如haircolourblack，hairstylebob），因为我认为理解代码会更容易。但是，事后看来，我希望我使用带编号的名称（haircolour1，hairstyle1），因为如果您的资产发生更改，事情可能会变得棘手（加上数字可以轻松维护针对多个化身的代码）。同样，使用SASS阵列减少维护费用。

5）使用类前缀
（例如.preview .preview-eye代替.preview .eye或.preview .preview-hair-style代替.preview .hair）。这样做的原因是，许多名称非常通用，可能会在页面上的多个位置使用（例如.preview和.input部分）。如果使用前缀，则更容易定位特定的类。另外，您可以使用[class*="preview-"]或[class*="input-"]定位前缀的所有成员，而不必在代码中添加很多共享类（例如，[class*="-hair-"]将获取所有头发元素，而无需对每个头发应用单独的头发类元件。

6）考虑SVG
如果将SVG用于图像资产，则可以使文件较小，并且它们可以按比例缩放到任意大小。请务必注意SVG浏览器兼容性（http://caniuse.com/svg）

7）考虑CSS背景大小
您还可以使用background-size: contain缩放图像资产，这可以轻松地为.preview和.input实例重用同一图像。但是，它也存在兼容性问题。

它看起来确实是一个艰巨的项目，主要是因为没有任何有关如何构建它的资源。但是，如果将其分解，则实际上很容易。主要是代码维护是一个问题，因此请务必进行计划！