如何在衣服上制作与原版相似的材料图案答案

【问题标题】：How to make a material pattern on clothes resembling the original如何在衣服上制作与原版相似的材料图案
【发布时间】：2020-01-25 14:07:24
【问题描述】：

我得到下面这行代码来改变面料的颜色，但问题是材料的颜色不符合服装模型上的图案。如果我参考服装网站，他们可以将服装材料的颜色更改为与原始颜色相似（https://www.tailorstore.com/）。这该怎么做。谢谢你的帮助。

这是代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

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

<script>
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://i.pinimg.com/originals/86/2f/37/862f37a3919ee3288c458a1a23ba756a.png";
img2.src = "https://secure.img1-fg.wfcdn.com/im/82560777/resize-h800%5Ecompr-r85/8420/84209861/Vita+Basic+Removable+Peel+and+Stick+Wallpaper+Panel.jpg";

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);
}
</script>

</body>
</html>

结果如下：

这就是推荐网站上的内容：

我真的希望有人可以帮助我解决这个问题。

【问题讨论】：

请您从您的邮件中删除该网站 (tailorstore.com)，它可能被视为垃圾邮件。

标签： javascript jquery html css plugins

【解决方案1】：

我真的不明白你需要什么帮助，这段代码完全符合它的预期。 “img1”是空白模型画布，“img2”是模式。在这种情况下，上面显示的模式。

我将图案替换为匹配的蓝色图像

img2.src = "https://www.beautycolorcode.com/829bca.png";

给我这个

【讨论】：

请访问此地址：i.pinimg.com/originals/b3/e2/44/…。可以看出，衬衫线条（直线向下）的图案与领子线条的图案（水平方向的直线）不同。这就是我要问的。怎么办？
找一个相似partern的图片，把img2的url替换成你找到的图片的url。