Question

假设我有一张图片！
现在我想用下面的织物填充该图像。

我的最终图像将如下所示

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

是否可以使用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 canvas和WebGL中的一个立方体：https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/

请注意，复制一个简单的多维数据集需要花费大量的代码和精力。您需要考虑衬衫的外部形状，围绕这些形状的织物弯曲（不仅沿边缘弯曲，还沿弯曲手臂等零件上的逼真的曲线），衬衫零件的深度印象距离越来越近，织物在衬衫上的皱纹上起弧。这些细节需要IMMENSE编码。

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

所花时间的投资回报率很低。您将花费大量时间和资源来使它正常运行。
如果是在客户端（html或js）完成的，那么所包含的代码和库将超出客户端处理游戏以外的内容所需的数量。
每次交换结构时都要运行此代码，这在客户端很费力。
有更好的选项（需要更少的代码和更少的处理能力）可以实现相同的目标，例如Bombay Shirts在演示中是如何做到的。

这是怎么做的？

下面是打开检查器的图片，查看页面的资源。左侧的红色框中列出了衬衫的所有部分。选择一个，您会看到如右图所示。

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

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

真正的答案是，孟买衬衫根本没有做到这一点。如果您仔细查看图像的来源，则它是与它们完全不同的服务器：

<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产品可视化效果的公司。

解决方案

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

孟买衬衫永远不可能采用下面的手动解决方案，因为面料和选件太多-这将花费太多时间。他们没有重新发明轮子，而是选择了Picario的解决方案。 您可以这样做。

好处：

没有硬核编码和知识
没有严格的照相购物和技能
没有硬核3D建模和无尽的导出功能
未使用客户端处理能力或带宽
快速/易于实施

几个选项：

Picario XPO

iDesigniBuy Tailoring Software

3D建模软件

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

使用Code / Photoshop手动

大多数其他解决方案将花费太多时间/知识/金钱-尤其是采用算法手动编码此功能的路线。对每个图像进行光影处理会花费大量的工作，结果会非常不一致（除非您是photoshop天才）。

克里斯·伦戈（Cris Luengo）在评论中提出了一个重要问题：

为什么衬衫的每个部分都有单独的图像？为每件完整的衬衫配备一张图片会更简单吗？ –克里斯·伦戈（Cris Luengo）

对此做出回应：

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

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

Answer 2

在查看了您提供的网站后，实际上是在后端而不是前端中完成工作，您可以从Chrome的以下屏幕截图中看到该工作：

关于后端的功能，这并非微不足道，而是Computer Vision中的某种算法。如果您对此领域没有任何知识，则可以先阅读DIP（数字图像处理）之类的书。然后，您可以阅读有关此领域的一些文章- 3D纹理合成，等等。

简而言之，仅使用JS或PHP并不是一件简单的任务。这是一些算法作品，而不是某些编程语言作品。

P.S。注意袖子的方向和皱纹。这表明它不仅仅是复制和粘贴某些纹理，而是有关 3D 成形的复杂算法。

祝你好运！：）

Answer 3

此问题的难点是使平整的纹理逼真地包裹在非平整衬衫的轮廓周围。

如果您有衬衫的3D模型，则可以在您选择的3d程序中应用纹理并将结果预处理为图像（尽管由于软件不是例如，应该将纹理在袖子和衣领上旋转90度）。您还需要获得比您所拥有的更为干净，无缝的纹理循环图像。这似乎是您正在查看的示例站点所使用的技术（实际上，它们使用的是分别针对衬衫的身体，衣领，袖子，手腕和纽扣的一堆分别预渲染的图像。）

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

像在<canvas>中尝试的那样，用2D纹理简单地填充衬衫的2D区域，充其量只能使您看起来像一块平整的织物，被切成衬衫状。（您的代码本身没有错，它看起来像是像素化的，因为您为它提供了某种织物编织的像素化特写纹理，而不是问题中所示的格子；但是这种技术只能给您纸娃娃类似的结果，而不是您要寻找的逼真的形状。）

如果起点是3d对象的任意2d图像和不干净循环的纹理的2d图像，并且您希望能够基于其2d表示自动估计对象的3d轮廓并以逼真的方式将它们放在一起……好吧，在当今机器学习和生成网络等方面，我不会说这是一个不可能任务，但是如果您解决了该难题，那么您或许就能获得一两个博士学位，并开始成功的SaaS。

Answer 4

您的原始图像是3维的。当然，如果您将图案用作简单图像并重复进行，则形状将消失，您将获得二维图像。您提供的图案也包含曲率，这没有帮助。您将需要确保您的模式是您想要重复的内容，因此从模式的顶部开始，有效的延续是模式的底部，而从模式的左边开始，有效的延续是模式的右边。并且应该确保所拥有的图案是二维的，也就是说，展开式衬衫将具有该图案。

如果从这些约定开始，您的第一个里程碑应该是在2D模式下正确使用图案。如果实现了这一点，则需要处理衬衫的基础变形，以了解用户的眼睛与假想点之间的距离（如果衬衫具有给定的形状）。基于此，您将能够计算每个像素的正确颜色。

您将需要阅读一些有关公式的知识，以帮助您：Graphics - equation to convert 3d point to 2d projection

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

4 个答案:

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

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

这是怎么做的？

解决方案