下载两个堆叠在一起的图像作为一个

Question

下面的代码片段是一个Web应用程序，可让用户混合两个相同尺寸的图像。我正在寻找一种方法来下载生成的图像。我遇到这个问题的原因是因为这些只是两个图像堆叠在一起。我能想到的一个解决方案是使用画布。但是，我不确定如何在这种情况下使用画布。

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='#'>

Answer 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来扭曲两个图像，你可以使用下面的代码来获得单个元素（画布）。