Question

我有一个AngularJS内置的产品配置程序应用程序。选择选项后，PNG图像会堆叠在一起以显示成品。所有图像大小相同，但内容不同。

一旦用户完成配置选项，我正在寻找一种方法将所有堆叠的图像组合成一个新的PNG文件，然后将该文件保存到服务器上。

我有什么选择？

Answer 1

使用Canvas API，这很容易实现。以下假设所有显示的图像已经完全加载，因此请记住：

var combineImages = (function () {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  return function (className, callback) {
    var images = Array.from(document.getElementsByClassName(className));

    images.sort(function (a, b) {
      return a.style.zIndex - b.style.zIndex;
    });

    var width = canvas.width = images[0].naturalWidth;
    var height = canvas.height = images[0].naturalHeight;

    images.forEach(function (i) {
      ctx.drawImage(i, 0, 0, width, height);
    });

    canvas.toBlob(function (blob) {
      var image = new Image();
      image.onload = function () {
        callback(this);
      };
      image.src = URL.createObjectURL(blob);
    });
  }
})();

// combineImages('my-image-class', function (combinedImage) { ... });

参考

Answer 2

您可以查看一些可以捕捉主div内容并将其转换为png的工具。我在过去使用pdfjs工具将其转换为pdf。

在AngularJS应用程序中将多个PNG文件合并为一个

2 个答案:

参考