在畫布上渲染svg圖像

Question

我正在嘗試在畫布上渲染SVG圖像，一次繪制一個圖像以填充給定的行，以下是相同的代碼段：

  function createSVGUrl(svg) {
    var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
    return DOMURL.createObjectURL(svgBlob);
  };

/**
   * Renders svg tile on the given context.
   * @param {CanvasRenderingContext2D} ctx
   * @param {SVGElement} svg The svg tile.
   * @param {{x: number, y:number}} pos The position to draw the svg tile on.
   * @throws Error
   */
  function renderSVGTile(ctx, svg, pos) {
    var img = new Image();
    var url = createSVGUrl(svg);
    img.onload = function() {
      try {
        ctx.drawImage(img, pos.x, pos.y);
        ctx.imageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        DOMURL.revokeObjectURL(url);
      } catch (e) {
        throw new Error('Could not render image' + e);
      }
    };
    img.src = url;
  };

問題是我可以看到不需要的部分填充的行，是否可以立即填充整個行？

Answer 1

是。 首先將整行瓷磚繪制到屏幕外的Canvas中。 完成后，您可以將該屏幕外的畫布繪制到主畫布上。

就像是：

var offscreenCanvas = document.createElement('canvas');
offscreenCanvas .width = <whatever>;
offscreenCanvas .height = <whatever>;
var offscreenContext = offscreenCanvas.getContext('2d');

// Draw all your tiles
renderSVGTile(offscreenContext, svg, pos);
//... loop through all tiles etc

// When finished...
mainCanvasContext.drawImage(offscreenCanvas, 0, 0);

演示：

 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("source"); var offscreenCanvas = document.createElement("canvas"); offscreenCanvas.width = 300; offscreenCanvas.height = 150; var offscreenContext = offscreenCanvas.getContext("2d"); offscreenContext.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); offscreenContext.drawImage(image, 33, 71, 104, 124, 108, 20, 87, 104); ctx.drawImage(offscreenCanvas, 0, 0); 

 <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="http://placekitten.com/300/227" width="300" height="227"> </div> 

Answer 2

這就是我的操作方式，盡管我不確定它是否會達到您的目的，因為在渲染時我在文檔中有圖像，但它只是隱藏的。

var ctx = document.getElementById("canvasID").getContext("2d");
ctx.drawImage(document.getElementById("imageID"), x,y,w,h);

Answer 3

下面的解決方案對我來說很好用：

 /**
   * @param {CanvasRenderingContext2D} ctx
   * @param {!Array<!SVGTile>} tiles
   */
  function drawTiles(ctx, tiles) {
    var canvas  = document.createElement('canvas');
    var width   = tiles.length * TILE_WIDTH;
    var height  = TILE_HEIGHT;
    var y = tiles[0].y;
    canvas.width  = tiles.length * TILE_WIDTH;
    canvas.height = TILE_HEIGHT;
    var context = canvas.getContext("2d");
    tiles.forEach(function(tile, index) {
      renderTile(context, tile, function() {
        if (tiles.length === index + 1) {
          ctx.drawImage(canvas, 0, y);
        }
      });
    });
    // TODO: Below code is for testing purpose.
    var temp = document.createElement('div');
    temp.appendChild(canvas);
    document.body.appendChild(temp);
  };


  /**
   * Renders svg tile on the given context.
   * @param {CanvasRenderingContext2D} ctx
   * @param {!Tile} tile The tile to render.
   * @param {function()} callback To be called after image is loaded.
   * @throws Error
   */
  function renderTile(ctx, tile, callback) {
    var img = new Image();
    img.onload = function() {
      try {
        ctx.drawImage(this, tile.x, 0, tile.width, tile.height);
        ctx.imageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        DOMURL.revokeObjectURL(tile.svgURL);
        callback();
      } catch (e) {
        throw new Error('Could not render image' + e);
      }
    };
    img.src = tile.svgURL;
  };