javascript - 打印出 html5 Canvas 的部分

Question

我有一个 html5 Canvas (3000 像素 x 3000 像素)。我正在使用以下函数打印 Canvas :

function printCanvas()  
{  
    popup = window.open();
    popup.document.write("<br> <img src='"+canvas.toDataURL('png')+"'/>");
    popup.print();
}

问题是，如果我在 Canvas 上只有一个元素(比如一个圆圈)并按下打印，它将尝试打印出整个 Canvas (3000 x 3000)。有没有办法改变它，让它只打印 Canvas 的某个部分，或者只打印有元素的部分，而不打印出空白。

谢谢。

Answer 1

另一个答案描述了正确的方法。主要问题是找到边界。我获取所有图像数据并在两个 for 循环中找到边界:

function getCanvasBorders(canvas) {
  var topleft = {x: false, y: false};
  var botright = {x: false, y: false};

  for(var x = 0; x < canvas.width; x++) {
    for(var y = 0; y < canvas.height; y++) {
      if(!emptyPixel(context, x, y)) {
        if(topleft.x === false || x < topleft.x) {
          topleft.x = x;
        }
        if(topleft.y === false || y < topleft.y) {
          topleft.y = y;
        }
        if(botright.x === false || x > botright.x) {
          botright.x = x;
        }
        if(botright.y === false || y > botright.y) {
          botright.y = y;
        }
      }
    }
  }

  return {topleft: topleft, botright: botright};
}

SO 片段不能与 document 一起使用，所以这里是 jsfiddle .