合并两张图片模拟服装店

Posted 2023-03-07

【中文标题】合并两张图片模拟服装店

【英文标题】：merge two images to simulate clothes shop

【发布时间】：2020-12-05 00:10:02

【问题描述】：

希望你过得好

所以我有一个问题要解决，所以我需要你的帮助，我想达到这个结果但我不知道video of the result。

我用 javascript 尝试过画布，但我不知道如何控制图案的比例，也不知道带有 css 的 mix-blend-mode 是否可以工作。

这是我试图做的：

let image = new Image();
let pattern = new Image();

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d')
let cnt = 2;

let inc = document.querySelector('.inc');
let dec = document.querySelector('.dec');

let num = 0.5;


//console.log(ctx)

image.src = './model.png';
pattern.src = './texture.jpg';


console.log(canvas.width)

//console.log(image , pattern)

const go = (inc) => 
    ctx.globalCompositeOperation = "multiply";
    ctx.fillStyle = ctx.createPattern(pattern, "repeat");
    ctx.drawImage(image, 0, 0, image.width*.5, image.height*.5);
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "destination-in";
    ctx.drawImage(image, 0, 0, image.width*inc, image.height*inc);


image.onload = pattern.onload = function() if (!--cnt) go(num);

inc.addEventListener('click' , () => 
    num = num + 0.1
    go(num);
)

结果是：image

【参考方案1】：

Ruben，我已经构建了简单的 POC 来查看和测试它 - 如果适合您的需要，请使用它来构建它。

我已经使用了几行来评论发生了什么，但是对于需要事先准备好的原生 css + alpha 图像 (png)，这非常容易

干杯

var x = document.getElementById('pats') // pattern slider
var y = document.getElementById('imgs') // img's slider
var p = document.getElementById('pat') // ref to patter box
var i = document.getElementById('img') // ref to img box

// img array
var a = ["https://i.imgur.com/nPrDAhT.png","https://i.imgur.com/dzw2SdV.png"]

// main function
function update( e )
  // change size of pattern that is behind
  if( e.target.id == 'pats' ) p.style.backgroundSize = e.target.value + "px"
  // only concept, but do use already existing slider libs or similar
  if( e.target.id == 'imgs' ) i.setAttribute( 'src', a[ e.target.value - 1 ] )


// hooking of events onto sliders only
x.addEventListener('input', update );
y.addEventListener('input', update );

#scene
  position: relative;
  height: 100vh

#img, #pat
  position: absolute; 
  width: 100%;
  height: 100%;

#pat
  background-image: url(https://i.imgur.com/VuT8Y0G.png)

<div class="slider-container" style="">
  <div id="x-slider" style="">
    Pattern slider <input id="pats" type="range" min="1.0" max="100.0" value="50.0">
  </div>
  <div id="y-slider" style="">
    Image slider <input id="imgs" type="range" min="1.0" max="2.0" value="1.0">
  </div>
</div>

<div id="scene">
 <div id="pat"> &nbsp; </div>
 <img id="img" src="https://i.imgur.com/nPrDAhT.png" src1="https://i.imgur.com/dzw2SdV.png" />
</div>

【讨论】：

非常感谢！愿上帝保佑你:)

谢谢@rubennzaou，很高兴这对您有帮助:) 如果满意，请将其标记为解决方案

当我在我的文本编辑器中尝试时它不工作！我不知道怎么了