Как сделать материальный узор на одежде, напоминающей оригинал - PullRequest
0 голосов
/ 25 января 2020

Я получаю следующую строку кода, чтобы изменить цвет фабрики c, но проблема в том, что цвет материала не соответствует образцу на модели одежды. если я ссылаюсь на сайт одежды, они могут изменить цвет материала одежды, чтобы он напоминал оригинал (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>

И вот результат:

enter image description here

И это то, что находится на сайте рефералов:

enter image description here

Я действительно надеюсь, что есть кто-то, кто может помочь мне решить эту проблему .

1 Ответ

0 голосов
/ 25 января 2020

Я не совсем понимаю, с чем вам нужна помощь, этот код делает именно то, что должен. «img1» - это пустой холст модели, а «img2» - шаблон. В этом случае шаблон, показанный выше.

Я заменил шаблон на соответствующее синее изображение вместо

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

, что дает мне

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...