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

Question

1. 假设我有一张图片！

2. 现在，我想用下面的布料填充该图像。

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

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

有没有办法用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编码量。

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

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

孟买衬衫是如何做到的？

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

图中衬衫的所有组件都是文件类型.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的网站，Picario是一家专门创建可定制3D产品可视化效果的公司。

解决方案

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

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

优点：

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

几个选项：

Picario XPO

iDesigniBuy裁缝软件

3D建模软件

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

使用Code / Photoshop手动

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

Cris Luengo在评论中提出了一个很大的问题：

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

对此的回应：

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

我意识到这个答案和其他答案并不是您所希望的，但是他们肯定传达出一致的信息，即PHP / JS / HTML不是适合此工作的工具。