Question

我有一个15000x15000像素矢量图像，我想用它作为画布项目的背景。我需要能够快速且频繁地（在requestAnimationFrame内）剪切一段图像并将其作为背景绘制。

使用...

绘制图像所需的部分

const xOffset = (pos.x - (canvas.width / 2)) + config.bgOffset + config.arenaRadius;
const yOffset = (pos.y - (canvas.height / 2)) + config.bgOffset + config.arenaRadius;
c.drawImage(image, xOffset, yOffset, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

计算所需背景的面积并绘制图像。这一切都很好，但重绘速度很慢，第一次抽奖甚至更慢。

加载这个巨大的图像似乎很荒谬，性能低迷。如何减小文件大小或以其他方式提高性能？

编辑：以完整尺寸绘制如此大的图像没有合理的解决方案。因为背景是重复模式，我目前的解决方案是采用一种模式＆＃34; cell＆＃34;并多次绘制。

Answer 1

我强烈建议使用 EaselJS 将多个/大型对象渲染到HTML画布。该库支持向量缓存，webgl等等。

以下是缓存多个矢量对象到位图的示例（单击复选框进行比较）： https://www.createjs.com/demos/easeljs/cache

您应该能够以相同的方式处理背景矢量。只需缓存对象，让软件处理所有繁重的工作。

Answer 2

15000px x 15000px确实很大。

GPU必须将其作为原始RGB数据存储在其内存中（我不会完全记住数学，但我认为它类似于宽x高x 3字节，即你的情况下为675MB），这比大多数常见的GPU都可以处理）再加上你可能拥有的所有其他图形，你的GPU将被迫丢弃你的大图像并每帧再次抓取它。

为了避免这种情况，您可能最好将大图片拆分为多个较小图片，并且每帧调用多次drawImage。这样，在最坏的情况下，GPU只需要获取所需的部分，在最好的情况下，它已经将其存储在内存中。

这是一个粗略的概念证明，它将在250 * 250px的瓷砖中分割5000 * 5000px的svg图像。当然，你必须根据自己的需要进行调整，但它可能会给你一个想法。

＆＃13;

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'
  });
}

＆＃13;

<label>draw split <input type="checkbox" id="chck" checked></label>
<canvas id="canvas" width="800" height="800"></canvas>

＆＃13;

实际上，在您的具体情况下，我个人甚至会在服务器上存储拆分图像（因为它应该占用更少的带宽，因此它应该在svg中存储），并从不同的源生成切片。但我会把它作为一种练习让读者阅读。

处理HTML5画布中的大图像

2 个答案: