Как получить базовый URL-адрес 64 с большим размером холста?

Я использую реагирующую нативную библиотеку холстов и реализую холст размером листа A4 шириной и высотой более 3000 пикселей. Теперь у меня есть пустой холст и я вставляю несколько изображений в холст, поэтому, как только холст имеет больший размер памяти или большой базовый URL-адрес 64, он ломается, не давая мне базовый URL-адрес 64, я получаю только «данные:,». Но если мы пытаемся выполнить задачу с 1000 пикселей, то это дает мне идеальный базовый URL-адрес 64.

Библиотека:

https://github.com/iddan/react-native-canvas

Код метода:

      handleCanvas = async canvas => {
    if (canvas != null) {
      canvas.width = 2000;
      canvas.height = 2000;
      const context = canvas.getContext('2d');
      if (this.state.passObj && this.state?.passObj.alphabets) {
        var images = {};
        var count = 0;
        {
          for (
            let index = 0;
            index < this.state?.passObj.alphabets.length;
            index++
          ) {
            let item = this.state.passObj?.alphabets[index];
            console.log(item.imageUrl);
            images['img' + index] = await new CanvasImage(canvas);
            images['img' + index].crossOrigin = 'Anonymous';
            images['img' + index].src =
              'https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dmlld3xlbnwwfHwwfHw%3D&w=1000&q=80';
            await new Promise((resolve, reject) => {
              images['img' + index].addEventListener('load', async () => {
                await context.drawImage(
                  images['img' + index],
                  item.xCoordinate / 10,
                  item.yCoordinate / 10,
                  item.width / 10,
                  item.height / 10,
                );
              });

              resolve('true');
            })
              .then(res => {
                console.log(count, this.state?.passObj?.alphabets?.length);
                count = count + 1;
                if (count === this.state?.passObj?.alphabets?.length) {
                  console.log('came');
                  this.callback(canvas);
                }
              })
              .catch(err => console.log('err : ', err));
          }
        }
      }
    } else {
      alert('there is no canvas');
    }
  };

HTML:

      <Canvas ref={this.handleCanvas} />

заранее спасибо

0 ответов

Другие вопросы по тегам