javascript - 如何用图案填充图像(衬衫上的织物)

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 = "/image/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 渲染设计的库。
大多数游戏开发人员用于 Angular 色建模和渲染的语言都是很好的替代方案，这些语言通常包括 C++、Java 和 Python(对于逻辑和有时运动更是如此)。
Javascript/jQuery
有一些不错的 javascript 游戏引擎可以处理 3D 渲染。请注意，这些通常不适用于 Angular 色建模，因为他们希望大部分工作在引擎本身之外完成。通常它是与 WebGL 结合使用的库。这里有两个流行的选项:
https://www.babylonjs.com
https://threejs.org
HTML Canvas
这在这里是可能的，但比使用专为这项工作设计的引擎更需要代码。
以下是使用 HTML 进行游戏的示例:https://www.html5rocks.com/en/gaming/
这是 HTML5 Canvas 和 WebGL 中的立方体:https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/
请注意重现一个简单的多维数据集需要多少代码和工作量。您需要考虑衬衫的外部形状、这些形状周围织物的弯曲度(不仅仅是沿着边缘，而是沿着弯曲的 ARM 等部分的真实曲线)、衬衫各部分的深度印象越来越近， Fabric 在衬衫的​​皱纹上形成弧形。这些细节需要大量的编码。

你的个人时间和精力值得吗？可能不是。

所花费时间的投资返回将很低。您将花费大量时间和资源使其正常运行。

如果它是在客户端(html 或 js)完成的，那么包含的代码和库将比客户端处理下载游戏所需的要多。

每次交换结构时运行此代码在客户端都会很费力。

有更好的选择(需要更少的代码和更少的处理能力)可以实现相同的目标，例如 Bombay Shirts 在演示中是如何做到的。

Bombay Shirts 是如何做到的？
下面是打开检查器的图片，查看页面的资源。在左边的红色框中是衬衫所有部件的列表。选择了一个，如右图所示。

图中衬衫的所有组件都是文件类型 .pfs . PFS 文件是 PhotoFiltre Studio 的专有文件. PhotoFiltre Studio 进行图像编辑，但它也有助于在元素之间建立坐标。
袖口、衣领、纽扣、口袋和袖子大约有 11 个独立的图像。有趣的是，衬衫的组件在外观上不是 2D 的:在最终渲染中不可见的部分在这里可见(例如，袖孔的内部，如上图所示)。这是因为衬衫的每个组件都可能是用一些 3D 建模软件制作的。
然而，真正的答案是 Bombay Shirts 根本没有这样做。 如果您仔细查看图像的来源，就会发现它与他们的服务器完全不同:

<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 永远无法采用下面的手动解决方案，因为 Fabric 和选项太多——这会花费太多时间。他们没有重新发明轮子，而是选择了 Picario 的解决方案。你也可以这样做。
好处:

没有核心编码和知识

没有硬核photoshopping和技巧

没有硬核 3D 建模和无休止的导出

没有使用客户端处理能力或带宽

快速/易于实现

几个选项:
Picario XPO
iDesigniBuy Tailoring Software
3D建模软件

使用 3D 建模软件创建产品模型。如果您有带有可见选项的产品，请为衬衫的每个组件创建一个模型。我推荐 Blender因为它是免费的，质量相当高，而且有据可查。 Maya可以说更好，但它不是免费的。

将每种织物另存为 Material /纹理(我可能在这里混淆了术语)，并将每种织物应用于您的模型。

导出应用了织物的每个模型/组件的相同前 View (例如:https://blender.stackexchange.com/questions/39022/how-to-save-render)。

当用户从浏览器请求您的产品时，将每个完成的组件发送到浏览器，并附上坐标，告诉浏览器在何处使其与其他组件对齐。

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

Cris Luengo 在评论中提出了一个很好的问题:

Why a separe image for each component of the shirt? Wouldn’t it be simpler to have a picture for each complete shirt? – Cris Luengo

对此的回应:

@CrisLuengo great question. It's because some shirts have different pockets, buttons, collar styles, etc. You could either have a completely separate model for all of them, or use the same base models and just update components. It's the same reason why we make use of reusable code: lower maintenance.

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