【前端】Canvas画布实现在线的唇膏换色功能

【前端】Canvas画布实现在线的唇膏换色功能

推荐超级课程：

• 本地离线DeepSeek AI方案部署实战教程【完全版】
• Docker快速入门到精通
• Kubernetes入门到大师通关课
• AWS云服务快速入门实战

背景概述

===================

在我们的网站上销售美容产品，必须要帮助客户从种类中选择正确产品。
对于美容产品来说，用户通过屏幕上的图片做出正确的选择至关重要。例如，用户可能想知道某款唇色涂抹在特定肤色上会是什么样子。

解决这个问题有多种方法。

• 我们可以为每种唇色准备一张图片，并在用户浏览色板时更换图片。这种方法可行，但会影响网站性能。更快的页面意味着更好的用户体验。每次为数百种颜色变体加载图片会在低带宽网络上造成不必要的延迟，从而影响用户体验。
• 我们也可以使用SVG，然后在上面应用颜色，但这种方法的一个挑战是，对于唇色这样的用例，细线和阴影看起来会“动画化”，结果会显得有些不自然。
• 为了确保用户看到的颜色和唇形尽可能真实，我们使用了PNG图片，将这些PNG像素转换成所需的颜色，并使用画布来应用颜色，这样做速度很快！以下是我们取得的成果！

以下是我们的实现方法！

=====================

让我们逐步探索Canvas API，在本教程结束时，你可以使用这种简单技术在你的网站上解决类似的问题。

第一步 — 找到灰度唇部图像

=========================================

首先，我们需要一张唇部图像，我们将在上面尝试不同的颜色。

这里我们开始！由于图像是灰度的，我们在应用任何颜色之前不需要计算任何东西。如果图像不是灰度的，我们需要先将图像转换为灰度，然后继续。

我们确保在给唇部上色时不会扭曲细线和阴影，否则它会看起来不自然。

第二步 — 创建一个画布

==========================

让我们编写一些代码来创建一个画布。

这是HTML标记：

<div>
    <canvas id=”finalCanvas” />
</div>
<div style="display: none">
    <canvas id=”hiddenCanvas” />
</div>

在这个HTML标记中，你可以看到两个画布元素，一个名为‘finalCanvas’，另一个名为‘hiddenCanvas’。我们将使用‘hiddenCanvas’来绘制唇部图像，然后在上面添加颜色，最后将其映射回‘finalCanvas’。

我们需要两个画布，因为我们在这里使用了一个两遍算法。在第一遍中，我们用所需颜色绘制整个画布，在第二遍中，我们将画布裁剪以适应最终的‘finalCanvas’。

第三步 — 加载唇部图像

==============================

const image = new Image();
image.crossOrigin = ‘Anonymous’;
image