I am trying to resize multiple images in the browser (same results in Chrome and Safari) by using canvas, to then save them to IndexedDB via Dexie.js. It all works fine in Android, but on iOS (tested on iPhone 8 and X) 1 or 2 random pictures result in black images. What might be the issue? This is the function I am using:

photoHeightMax = 1100;
photoWidthMax = 1100;

    resizeBase64Img(src) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.src = src;
      img.onload = () => {
        const imgWidth = img.width;
        const imgHeight = img.height;
        const scale = Math.min(this.photoWidthMax / imgWidth, this.photoHeightMax / imgHeight);

        const widthScaled = scale > 1 ? imgWidth : imgWidth * scale;
        const heightScaled = scale > 1 ? imgHeight : imgHeight * scale;

        const elem = document.createElement('canvas');
        elem.width = widthScaled;
        elem.height = heightScaled;
        const ctx = elem.getContext('2d');
        ctx.drawImage(img, 0, 0, widthScaled, heightScaled);
        const data = ctx.canvas.toDataURL('image/jpeg', 0.85);
        resolve(data);
      };
      img.onerror = (error) => reject(error);
    });
  }

Any help would be appreciated!