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

我想将多页文档的照片组合到至少一个dataURL，因为我需要一个图像数据字符串来将其发送到OCR-API

因此，我使用基于此示例的画布：

但是我在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;
         });
      }
  }

---

首先，您需要设置输出画布的

宽度

和

高度

属性。Thx，我通过动态计算画布的高度和宽度以及图像的y位置来解决这个问题