将一个对象的n个图像附加到一个画布上

Question

我想将多页文档的拍摄照片与至少一个dataURL合并，因为我需要一串图像数据才能将其发送到OCR-API。

因此，我根据此示例使用画布：

Merge two dataURIs to create a single image

但是我在html中的画布只显示了一幅图像的一小部分，还有来自DataURL的图像数据只给了我一小部分。

HTML

<div width=100 height=100 id="canvas" #ocrCanvas>

来源

var base64Canvas = [
   { src: 'data:image/png;base64,... },
   { src: 'data:image/png;base64,... },
   ...
];

添加画布

    addCanvas() {

      var base64ImagesArray = this.base64Canvas;
      var canvas = document.createElement('canvas');
      var destination = this.ocrCanvas.nativeElement;

      Promise.all(base64ImagesArray.map(imageObj => add2canvas(canvas, imageObj)))
          .then(
            (imageObj) => {
                   destination.appendChild(canvas);
                   var canvasURL = canvas.toDataURL();
                   this.sendDataGoogleOCR(canvasURL)
                 }
          );

      function add2canvas(canvas, imageObj) {
        //console.log(imageObj);
         return new Promise( (resolve, reject) => {
            if (!imageObj || typeof imageObj != 'object') return reject();
            var img = new Image();
            img.onload = function () {
                canvas.getContext('2d')
                      .drawImage(this, imageObj.x || 0, imageObj.y || 0);
                resolve();
            };
            img.src = imageObj.src;
         });
      }
  }