下载两个相互堆叠的图像作为一个答案

【问题标题】：Download two images stacked on top of each other as one下载两个相互堆叠的图像作为一个
【发布时间】：2018-02-23 07:20:46
【问题描述】：

下面的代码 sn-p 是一个网络应用程序，它允许用户混合两个相同尺寸的图像。我正在寻找一种下载结果图像的方法。我遇到这个问题的原因是因为这些只是两个相互堆叠的图像。我能想到的一种解决方案是使用画布。但是，我不确定如何在这种情况下使用画布。

var dimensions = [null, null];

function compareArray(arr1, arr2) {
  return arr1[0] == arr2[0] && arr1[1] == arr2[1];
}

function update(input, id) {
  var reader = new FileReader();

  reader.onload = function(event) {
    var image = new Image();
    image.src = event.target.result;

    image.onload = function() {
      if (id == 'img1' && dimensions[1] == null) {
        $('#img1').attr('src', event.target.result);
        dimensions[0] = [this.width, this.height];
      } else if (id == 'img2' && dimensions[0] == null) {
        $('#img2').attr('src', event.target.result);
        dimensions[1] = [this.width, this.height];
      } else if (id == 'img1') {
        if (compareArray([this.width, this.height],dimensions[1])) {
          $('#img1').attr('src', event.target.result);
          dimensions[0] = [this.width, this.height];
        } else {
          alert('Image dimensions must match.');
        }
      } else {
        if (compareArray([this.width, this.height],dimensions[0])) {
          $('#img2').attr('src', event.target.result);
          dimensions[1] = [this.width, this.height];
        } else {
          alert('Image dimensions must match.');
        }
      }
    }
  }

  reader.readAsDataURL(input.files[0]);
}

function opacityUpdate(value) {
  var percent1 = value;
  var percent2 = 100 - value;
  $('#percent1').html(percent1 + '%');
  $('#percent2').html(percent2 + '%');

  $('#img1').css('opacity', percent1 / 100);
  $('#img2').css('opacity', percent2 / 100);
}

img {
				position: fixed;
				opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='file' onchange='update(this, "img1");'>
<input type='file' onchange='update(this, "img2");'>
<br>
<table>
  <tr>
    <td id='percent1' style='width:40px;'>50%</td>
    <td><input type='range' min='0' max='100' value='50' id='range' oninput='opacityUpdate(this.value)'></td>
    <td id='percent2'>50%</td>
  </tr>
</table>
<img id='img1' src='#'>
<img id='img2' src='#'>

【问题讨论】：

你能展示一些预期输出的例子吗？
你只是将它们混合在一起，实际上什么也没发生，是的，你应该使用画布。
stackoverflow.com/questions/3648312/…

标签： javascript html image

【解决方案1】：

我在我的项目中使用了 Html2Canvas 库。我认为它可能符合您的要求。这是图书馆的链接https://github.com/niklasvh/html2canvas

html2canvas(document.getElementById('yourDiv')).then(function(canvas) {
    document.body.appendChild(canvas); // or do something to the canvas
});

如果你多放一个 div 来扭曲两个图像，你可以使用下面的代码来获取单个元素（画布）。

【讨论】：