如何用图案填充图像（衬衫上的织物）

Question

1. 假设我有一张图片！

2. 现在我想用下面的织物填充该图像。

1. 我的最终图像将如下所示

怎么做？到目前为止，我能够更改该图像的颜色，但无法填充图案。

有没有办法用 PHP、jquery 和 javascript 来做呢。

提前致谢！

演示链接：https://www.bombayshirts.com/custom/shirt

我只想像上面的演示那样在衬衫上填充图案。

我尝试过的是下面的，但是使用下面的代码，我失去了我的衬衫形状并且图像会被像素化。

var img1 = new Image, img2 = new Image, cnt = 2,
    canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

 
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "https://www.itailor.co.uk/images/product/shirt/it1823-1.png";       // Shirt
img2.src = "https://i.stack.imgur.com/sQlu8.png";   // pattern

// MAIN CODE ---
function go() {

  // create a pattern  
  ctx.fillStyle = ctx.createPattern(img2, "repeat");
  
  // fill canvas with pattern
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // use blending mode multiply
  ctx.globalCompositeOperation = "multiply";
  
  // draw sofa on top
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
  
  // change composition mode
  ctx.globalCompositeOperation = "destination-in";
  
  // draw to cut-out sofa
  ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}

<canvas id="canvas" width=500 height=300></canvas>

Answer 1

这可以用代码完成吗？绝对。

请注意，StackOverflow 不是编码室。我们无法为您编写所有这些代码，因此您应该从这些答案中期待最多的是朝着正确方向迈出的良好开端。

您专门询问了有关 PHP 和 Javascript 的问题，但我也会将 HTML 放入其中。让我们来看看。

PHP

快速搜索 PHP 中的 3D 渲染。你不会找到太多，因为没有太多。在服务器端，有远更好的语言、引擎和专为 3D 渲染设计的库。

大多数游戏开发人员用于角色建模和渲染的语言是很好的替代品，通常包括 C++、Java 和 Python（这一种更适用于逻辑，有时用于移动）。

Javascript / jQuery

有一些不错的 javascript 游戏引擎可以处理 3D 渲染。请注意，这些通常不适用于角色建模，因为他们希望大部分工作在引擎本身之外完成。通常它是与 WebGL 结合使用的库。以下是两个流行的选项：

https://www.babylonjs.com

https://threejs.org

HTML 画布

在这里是可能的，但比使用专为这项工作设计的引擎需要更多的代码。

这是一个使用 HTML 进行游戏的示例：https://www.html5rocks.com/en/gaming/

这是 HTML5 画布和 WebGL 中的立方体：https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/

注意复制一个简单的立方体需要多少代码和工作量。您需要考虑衬衫的外部形状、围绕这些形状的织物弯曲（不仅遵循边缘，还遵循弯曲手臂等部分的真实曲线）、衬衫部分的深度印象距离越来越近，织物的弧线覆盖在衬衫的皱纹上。这些细节需要大量的编码。

---

值得您花费个人时间和精力吗？可能不会。

1. 所花费时间的投资回报率会很低。您将花费 大量 时间和资源来使其正常运行。
2. 如果是在客户端（html 或 js）完成，所包含的代码和库将超出客户端所需要处理的任何非游戏目的的下载。
3. 每次切换结构时都运行此代码在客户端会很费力。
4. 有更好的选择（需要更少的代码和更少的处理能力）来实现相同的目标，例如 Bombay Shirts 在演示中是如何做到的。

---

孟买衬衫是如何做到的？

下面是打开检查器的图片，查看页面的资源。左边的红框是衬衫所有部件的列表。一个被选中，如右图所示。

图中衬衫的所有组件都是文件类型.pfs。 PFS 文件是 PhotoFiltre Studio 专有的。 PhotoFiltre Studio 进行图像编辑，但它也有助于建立元素之间的坐标。

袖口、衣领、纽扣、口袋和袖子大约有 11 张单独的图片。 有趣的是衬衫的组件在外观上不是 2D 的：在最终渲染中不可见的部分在这里是可见的（例如，袖孔的内部，如上图所示）。这是因为衬衫的每个组件都可能是使用某些 3D 建模软件制作的。

然而，真正的答案是 Bombay Shirts 根本没有这样做。如果您仔细查看图像的来源，它与他们的服务器完全不同： p>

<img class="img-fluid" src="https://bombayshirts.picarioxpo.com/collar_prince_charlie_v00.pfs?1=1&amp;width=500&amp;p.tn=BB001A.jpg&amp;p.tr=True" alt="custom shirts" style="z-index: 2;">

这些图片来自 picarioxpo.com。这是Picario 的网站，该公司专门创建可定制的 3D 产品可视化。

---

解决方案

使用现有解决方案 ← 选择这个！

Bombay Shirts 永远无法采用以下手动解决方案，因为面料和选项太多 - 这将花费太多时间。他们没有重新发明轮子，而是选择了 Picario 的解决方案。 你也可以这样做。

好处：

• 没有核心编码和知识
• 没有硬核照片和技巧
• 没有硬核 3D 建模和无限导出
• 未使用客户端处理能力或带宽
• 快速/易于实施

几个选项：

Picario XPO

iDesigniBuy Tailoring Software

3D 建模软件

1. 使用 3D 建模软件为您的产品创建模型。如果您有具有可见选项的产品，请为衬衫的每个组件创建一个模型。我推荐Blender，因为它是免费的、相当高质量的并且有据可查。 Maya 可以说更好，但它不是免费的。
2. 将每种织物保存为一种材料/纹理（我可能在这里混淆了术语），并将每种织物应用于您的模型。
3. 导出每个应用了织物的模型/组件的相同前视图（例如：https://blender.stackexchange.com/questions/39022/how-to-save-render）。
4. 当用户从浏览器请求您的产品时，将每个最终完成的组件发送到浏览器，并附上坐标，告诉它在哪里使它与其他组件对齐。

使用代码/Photoshop 手动

大多数其他解决方案都将花费太多时间/知识/金钱——尤其是采用算法手动编码此功能的路线。对每张图像进行 Photoshop 处理将是一项繁重的工作，结果非常不一致（除非你是 Photoshop 天才）。

---

Cris Luengo 在 cmets 中有一个很好的问题：

为什么要为衬衫的每个组件制作单独的图片？每件完整的衬衫都有一张照片不是更简单吗？ ——克里斯·伦戈

对此的回应：

@CrisLuengo 好问题。这是因为有些衬衫有不同的口袋、纽扣、领型等。您可以为所有衬衫使用完全独立的模型，或者使用相同的基本模型并仅更新组件。这与我们使用可重用代码的原因相同：维护更少。

---

我意识到这个和其他答案不是您所希望的，但它们肯定会发出一致的信息，即 PHP/JS/HTML 不是工作。

Answer 2

这个问题的难点在于让扁平纹理真实地包裹在非扁平衬衫的轮廓周围。

如果您有衬衫的 3D 模型，您可以在您选择的 3D 程序中应用纹理并将结果预处理为图像（尽管它仍然需要一些人工注意，因为该软件不是例如，要知道袖子和衣领上的纹理应该旋转 90 度）。您还需要获得比现有纹理更清晰、无缝的循环图像。这似乎是您正在查看的示例网站使用的技术（他们实际上使用了一堆单独预渲染的衬衫身体、衣领、袖子、手腕和纽扣的图像。）

或者，您可以聘请摄影师以相同或相似的姿势拍摄每件衬衫，或者聘请 Photoshop 专家手动完成这项工作（这就是完成大量目录工作的方式。）

只需用 2D 纹理填充衬衫的 2D 区域，就像您在 <canvas> 中所做的尝试一样，最多只能为您提供看起来像剪裁成衬衫形状的平面织物。 （就目前而言，您的代码没有任何问题，它看起来像素化，因为您给了它一些织物编织的像素化特写纹理，而不是问题中显示的格子纹理；但这种技术只能给您纸娃娃- 类似的结果，而不是您正在寻找的真实形状。）

如果您的起点是 3d 对象的任意 2d 图像和不干净循环纹理的 2d 图像，并且您希望能够根据对象的 2d 表示自动估计对象的 3d 轮廓并以逼真的方式将它们组合在一起......好吧，在机器学习和生成网络等的这些日子里，我不会说这是一个不可能的任务，但是如果你解决了它，你可能能够获得一两个博士学位并开始成功的 SaaS。

Answer 3

看了你给的网站，其实工作是在后端而不是前端完成的，你可以从下面的Chrome截图中看到：

关于后端的作用，它不是微不足道的，而是计算机视觉中的某种算法。如果你对这个领域没有任何了解，可以先看一本DIP（数字图像处理）之类的书。然后，你可以阅读一些关于这个领域的论文——3D纹理合成等等。

简而言之，仅使用 JS 或 PHP 即可完成的任务绝非易事。这是一些算法作品，而不是一些编程语言作品。

附：注意袖子的方向和褶皱。这表明它不是简单地复制和粘贴一些纹理，而是关于 3D 塑形的复杂算法。

祝你好运！ :)

Answer 4

您的初始图像是 3 维的。当然，如果你把一个图案作为一个简单的图像并重复它，形状就会消失，你会得到一个二维图像。您提供的图案也包含曲率，这没有帮助。您需要确保您的模式是您想要重复的东西，因此从模式的顶部开始，有效的延续是模式的底部向上，从模式的左侧开始，有效的延续是模式的右侧向左.而且你应该确保你拥有的图案是二维的，也就是说，一件展开的衬衫会有这种图案。

如果您从这些约定开始，您的第一个里程碑应该是在 2D 中正确使用该模式。如果你已经实现了这一点，你将需要处理衬衫的基本变换，如果衬衫具有给定的形状，则要知道用户眼睛和假想点之间的距离。基于此，您将能够计算出每个像素的正确颜色。

您需要阅读一些可以帮助您的公式：Graphics - equation to convert 3d point to 2d projection