Question

我正在尝试覆盖2张图像，但问题是我将它们包含在2个画布元素中。我想从canvas元素中获取图像，以某种方式逐字节解析它们并执行以下操作：第一张图像是随机照片，没有任何特殊之处。第二张图片是其中包含绘制对象并且背景为纯白色（rgb（255,255,255））的照片。这两个图像的大小相同（我通过调整canvas元素的大小将它们调整为相同的大小，我认为这是可以的，不会造成任何问题）。我想要做的是使用for和同时解析两个图像：在第二个图像（背景为白色的图像）的RGB从白色更改为任何其他值（这意味着我们在绘制的对象上）的情况下，我将第一幅图像的RGB设置为第二幅图像的RGB。所以基本上我有一张照片和一张在白色背景上绘制有随机对象的图像，我想将该对象放置在第一张图像上第二张图像的准确位置（i和j轴）上。

我已经尝试了一些方法，但是现在有点卡住了，因为我得到了uint8固定的两个图像数组，并且发生了一些奇怪的事情：第二张图片（白色背景上的对象）在整个数组上只有0个值，因此不应该知道为什么会发生...

  var first = document.getElementById('photo1').getContext("2d").getImageData(0, 0, document.body.clientWidth, document.body.clientHeight);//the first image
  var second = document.getElementById('photo2').getContext("2d").getImageData(0, 0, document.body.clientWidth, document.body.clientHeight);//the second image

然后我尝试了这个：

 first.data.find(function(element) {
   if ( element !== 0 ) console.log(element);//this doesn't log anything
 });

 second.data.find(function(element) {
   if ( element !== 0 ) console.log(element);//it's working
 });

我该怎么办？我想我缺少了一些东西... 也许还有其他更好的方法可以实现这一目标？

Answer 1

实现重叠的一种方法是使用grid layout并根据需要定义column start和/或row start。设置布局后，您可以使用z-index属性来控制重叠。

Sample Fiddle

.app {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .one {
    grid-row: 1;
    grid-column: span 3 / -1;
    z-index: 2;
  }
  
  .two {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: span 3;
    z-index: 2;
  }
  
  .one img {
    max-width: 500px;
  }
  
   .two img {
    max-width: 250px;
  }

<div class="app">
  <div class="one">
      <img src="https://i.ytimg.com/vi/cn591Vct9OU/maxresdefault.jpg" />
  </div>
   <div class="two">
      <img src="http://farm7.staticflickr.com/6057/6233529135_84914afb62.jpg" />
  </div>
</div>

如何重叠来自2个画布的2个图像？

1 个答案: