合并两张图片模拟服装店

关键词：

【中文标题】合并两张图片模拟服装店【英文标题】：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，很高兴这对您有帮助:) 如果满意，请将其标记为解决方案 当我在我的文本编辑器中尝试时它不工作！我不知道怎么了

如何将两张图片合并为一张图片

】如何将两张图片合并为一张图片【英文标题】：Howtofittwoimagesintooneimage【发布时间】：2022-01-1909:01:45【问题描述】：我正在做一个自己融合两个DICOM图像的项目。图片1(168x168)Image2(512x512)的图片合并后，两张图片完全不匹配。我... 查看详情

canvas合并两张图片(代码片段)

　　　　　　　　　　解析：原理是一样的　　画多张图需要一张一张画　　也就是等图片onload成功后处理　　这里代码写的比较随意　　实际用的时候可以小粉转一下也非常简单。我懒~~　　么么、、　　　　　　　　newImage(t... 查看详情

图片怎么合并在一起怎么将两张图片合并在一起

快速将两张图片合并拼成一张的办法使用的工具：优速图片格式转换器步骤1、在电脑上打开优速图片格式转换器，这需要大家提前安装好，然后选择软件中的【图片拼接】功能。大家电脑若没有这款工具，可以通过上面小编为... 查看详情

uestc-1599

...“我TMTM社保！”。 每张图片有一个社保值，他可以合并两张图片，合并所得的图片的社保值是原来两张图片的社保值之和。 每次合并需要消耗的体力也是原来两张图片的社保值之和。 显然，n?1n?1次合并之后，只剩... 查看详情

怎么做出两张图片拼在一起的图片?

...起，两张图片拼成一张大图。是一体的。快速将两张图片合并拼成一张的办法使用的工具：优速图片格式转换器步骤1、在电脑上打开优速图片格式转换器，这需要大家提前安装好，然后选择软件中的【图片拼接】功能。大家电... 查看详情

uestc1599wtmsb

...说道：“我TM社保！”。每张图片有一个社保值，他可以合并两张图片，合并所得的图片的社保值是原来两张图片的社保值之和。每次合并需要消耗的体力也是原来两张图片的社保值之和。显然，n?1次合并之后，只剩下一张图片... 查看详情

wpf通过位处理合并图片(代码片段)

原文:WPF通过位处理合并图片本文告诉大家，在使用WPF合并两张图片的处理，可以使用像素之间的与或和异或的方式，对三个颜色的通道进行处理。先给大家看一下软件的界面这就是通过将左边的两张图片叠加合并为一张图片，... 查看详情

Canvas - 组合两张图片，返回一个 img html 对象？

...问题描述】：我有两个具有不同srcurl的htmlimg对象。我想合并这两张图片（使用画布），并创建一个合并的img对象。这可能吗？怎么样？【问题讨论】：【参考方案1】：您可以使用drawImage。Demo。代码：var 查看详情

opencv怎么把两张图片合并到一起？

...宽smallwidth、高smallheight，假设把大图上的点A的坐标当做合并后小图的左上角点坐标，则可以先把大图上以A为左上角点，宽为smallwidth，高为smallheight的ROI区域内像素值设为0，然后对应着把小图的像素值赋给ROI区域内的对应点，就... 查看详情

使用 Python 和 OpenCV 合并这两张裁剪皮肤和原始自拍的图像？

】使用Python和OpenCV合并这两张裁剪皮肤和原始自拍的图像？【英文标题】：UsePythonandOpenCVtomergethesetwoimagesofcroppedskinandoriginalselfie?【发布时间】：2018-08-0213:41:08【问题描述】：因此，我们的想法是将这两张图片合并在一起。和。... 查看详情

bitmap合并图片

把两张bitmap覆盖合成为一张图/***把两个位图覆盖合成为一个位图，以底层位图的长宽为基准*@parambackBitmap在底部的位图*@paramfrontBitmap盖在上面的位图*@return*/publicstaticBitmapmergeBitmap(BitmapbackBitmap,BitmapfrontBitmap){if(backBitmap==null||backBitm 查看详情

ps两张图片合在一起

...改为白色，反复涂抹背景，让背景显示清楚。 6.最后合并图层Ctrl 查看详情

如何把两张照片拼在一起

...示。3、点击下左下角第一个图片按钮，从相册中找到要合并的两张图片。4、图片上传上去之后点击右上角三个省略号图标地方。5、在跳出来的框框中选择保存为图片，图片就会保存到相册中。6、回到相册中，就可以看到刚刚... 查看详情

marvelousdesigner服装设计与模拟

...家一定会想到MarvelousDesigner（MD）这款优秀的服装设计与模拟软件。它是依据真实世界的服装缝合样式生成衣服，软件的界面设计非常友好，非常容易上手。 查看详情

当两张表非常相似时，啥时候应该合并？

】当两张表非常相似时，啥时候应该合并？【英文标题】：Whentwotablesareverysimilar,whenshouldtheybecombined?当两张表非常相似时，什么时候应该合并？【发布时间】：2010-12-0111:26:19【问题描述】：我有活动和照片，然后两者都有。现在... 查看详情

如何合并图像并相互施加

】如何合并图像并相互施加【英文标题】：howtomergeImagesandimposeoneachother【发布时间】：2013-08-2008:31:42【问题描述】：假设我在某些Framelayout中上传两张或两张以上的照片。在此，我将在所有这三张照片中上传三张同一个人在三个... 查看详情

如何把两张图片拼成一张图片

...2、分别把两张照片置入到文档中，调整位置及大小。3、合并图层后保存。 参考技术B回答您好首先确定你所需要合二为一的图片，以下面两张图片为例，介绍具体的方法2选择其中一张图片，单击右键，选择“打开方式”下的“... 查看详情

Hive：将两张地图合并为一列

】Hive：将两张地图合并为一列【英文标题】：Hive:Mergetwomapsintoonecolumn【发布时间】：2020-04-1402:01:40【问题描述】：我有一个蜂巢表createtablemySource(col_1map<string,string>,col_2map<string,string>)这是记录的样子col_1col_2"a":1,"b":"2""c":... 查看详情