6

所以我有一个包含两个图像元素的网页。它基本上是一个网站，您可以在其中上传图像，并使用隐写术加密秘密按摩。我想展示不可见的差异，我发现Resemble.js是一个比较图像的库。它获取两个文件作为参数，我想使用我的图像源而不是文件，因为我不想保存生成的图像。

总而言之，我想摆脱请求并通过 HTML 中的源获取我的图像，但我不知道如何让它与 Resemble.js 一起使用，因为它只接受文件。

第二张图片是如何生成的：

cover.src = steg.encode(textarea.value, img, { 
  "width": img.width, 
  "height": img.height
});

处理文件的 JavaScript：

(function () {
  var xhr = new XMLHttpRequest();
  var xhr2 = new XMLHttpRequest();
  var done = $.Deferred();
  var dtwo = $.Deferred();

  try {
    xhr.open('GET', 'static/original.png', true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) { done.resolve(this.response); };
    xhr.send();

    xhr2.open('GET', 'static/encoded.png', true);
    xhr2.responseType = 'blob';
    xhr2.onload = function (e) { dtwo.resolve(this.response); };
    xhr2.send();
  } catch (err) {
    alert(err);
  }

  $('#example-images').click(function () {
    $.when(done, dtwo).done(function (file, file1) {
      if (typeof FileReader === 'undefined') {
        resembleControl = resemble('./static/original.png')
          .compareTo('./static/encoded.png')
          .onComplete(onComplete);
      } else {
        resembleControl = resemble(file)
          .compareTo(file1)
          .onComplete(onComplete);
      }
    });

    return false;
  });

}());
4

0 回答 0