Как получить базовый URL-адрес 64 с большим размером холста?
Я использую реагирующую нативную библиотеку холстов и реализую холст размером листа A4 шириной и высотой более 3000 пикселей. Теперь у меня есть пустой холст и я вставляю несколько изображений в холст, поэтому, как только холст имеет больший размер памяти или большой базовый URL-адрес 64, он ломается, не давая мне базовый URL-адрес 64, я получаю только «данные:,». Но если мы пытаемся выполнить задачу с 1000 пикселей, то это дает мне идеальный базовый URL-адрес 64.
Библиотека:
Код метода:
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} />
заранее спасибо