การจัดการกับรูปภาพขนาดใหญ่ในผ้าใบ HTML5

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>