15000px x 15000px действительно большой.
Графический процессор должен был бы хранить его как необработанные данные RGB в своей памяти (я точно не помню математические данные, но я думаю, что это что-то вроде ширины x высоты x 3 байта, то есть 675 МБ в вашем случае, чтобольше, чем большинство обычных графических процессоров).
Добавьте к этому всю другую графику, которая у вас может быть, и ваш графический процессор будет вынужден отбрасывать ваше большое изображение и захватывать его снова каждый кадр.
Чтобы избежать этого, вам, вероятно, лучше разделить ваше большое изображение на несколько меньших и вызывать несколько раз drawImage за кадр.Таким образом, в худшем случае, графическому процессору нужно будет только выбрать необходимую часть, а в лучшем случае он уже будет иметь ее в своей памяти.
Вот грубое доказательство концепции, которая разделит5000 * 5000px svg изображение в плитках 250 * 250px.Конечно, вам придется адаптировать его для своих нужд, но это может дать вам представление.
console.log('generating image...');
var bigImg = new Image();
bigImg.src = URL.createObjectURL(generateBigImage(5000, 5000));
bigImg.onload = init;
function splitBigImage(img, maxSize) {
if (!maxSize || typeof maxSize !== 'number') maxSize = 500;
var iw = img.naturalWidth,
ih = img.naturalHeight,
tw = Math.min(maxSize, iw),
th = Math.min(maxSize, ih),
tileCols = Math.ceil(iw / tw), // how many columns we'll have
tileRows = Math.ceil(ih / th), // how many rows we'll have
tiles = [],
r, c, canvas;
// draw every part of our image once on different canvases
for (r = 0; r < tileRows; r++) {
for (c = 0; c < tileCols; c++) {
canvas = document.createElement('canvas');
// add a 1px margin all around for antialiasing when drawing at non integer
canvas.width = tw + 2;
canvas.height = th + 2;
canvas.getContext('2d')
.drawImage(img,
(c * tw | 0) - 1, // compensate the 1px margin
(r * tw | 0) - 1,
iw, ih, 0, 0, iw, ih);
tiles.push(canvas);
}
}
return {
width: iw,
height: ih,
// the drawing function, takes the output context and x,y positions
draw: function drawBackground(ctx, x, y) {
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
// get our visible rectangle as rows and columns indexes
var firstRowIndex = Math.max(Math.floor((y - th) / th), 0),
lastRowIndex = Math.min(Math.ceil((ch + y) / th), tileRows),
firstColIndex = Math.max(Math.floor((x - tw) / tw), 0),
lastColIndex = Math.min(Math.ceil((cw + x) / tw), tileCols);
var col, row;
// loop through visible tiles and draw them
for (row = firstRowIndex; row < lastRowIndex; row++) {
for (col = firstColIndex; col < lastColIndex; col++) {
ctx.drawImage(
tiles[row * tileCols + col], // which part
col * tw - x - 1, // x position
row * th - y - 1 // y position
);
}
}
}
};
}
function init() {
console.log('image loaded');
var bg = splitBigImage(bigImg, 250); // image_source, maxSize
var ctx = document.getElementById('canvas').getContext('2d');
var dx = 1,
dy = 1,
x = 150,
y = 150;
anim();
setInterval(changeDirection, 2000);
function anim() {
// just to make the background position move...
x += dx;
y += dy;
if (x < 0) {
dx *= -1;
x = 1;
}
if (x > bg.width - ctx.canvas.width) {
dx *= -1;
x = bg.width - ctx.canvas.width - 1;
}
if (y < 0) {
dy *= -1;
y = 1;
}
if (y > bg.height - ctx.canvas.height) {
dy *= -1;
y = bg.height - ctx.canvas.height - 1;
}
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
if(chck.checked) {
// that's how you call it
bg.draw(ctx, x, y);
}
else {
ctx.drawImage(bigImg, -x, -y);
}
requestAnimationFrame(anim);
}
function changeDirection() {
dx = (Math.random()) * 5 * Math.sign(dx);
dy = (Math.random()) * 5 * Math.sign(dy);
}
setTimeout(function() { console.clear(); }, 1000);
}
// produces a width * height pseudo-random svg image
function generateBigImage(width, height) {
var str = '<svg width="' + width + '" height="' + height + '" xmlns="http://www.w3.org/2000/svg">',
x, y;
for (y = 0; y < height / 20; y++)
for (x = 0; x < width / 20; x++)
str += '<circle ' +
'cx="' + ((x * 20) + 10) + '" ' +
'cy="' + ((y * 20) + 10) + '" ' +
'r="15" ' +
'fill="hsl(' + (width * height / ((y * x) + width)) + 'deg, ' + (((width + height) / (x + y)) + 35) + '%, 50%)" ' +
'/>';
str += '</svg>';
return new Blob([str], {
type: 'image/svg+xml'
});
}
<label>draw split <input type="checkbox" id="chck" checked></label>
<canvas id="canvas" width="800" height="800"></canvas>
И на самом деле, в вашем конкретном случае я бы лично даже сохранял разделенные изображения на сервере (будь то в SVG, так как он должен занимать меньше пропускной способности), игенерировать плитки из разных источников.Но я дам это читателю в качестве упражнения.