Question

我有一个html5画布（3000px x 3000px）。我使用以下函数来打印画布：

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

问题是，如果我在画布上只有元素（例如一个圆圈）并按下打印，它将尝试打印出整个画布（3000 x 3000）。有没有办法改变它，所以它只打印画布的某个部分或只是有元素的部分，而不是打印出白色空间。

感谢。

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。

Answer 2

假设您有办法跟踪和重绘对象，您可以执行以下操作：

计算可包含所有对象的最大边界
创建一个大小为该
使用drawImage()及其剪裁参数在绑定表示的区域中绘制，但是绑定起始位置的偏移-x和-y。

改为打印临时画布。

更新：仅查找图像内容的边缘，假设背景透明，请参阅concat。

打印出html5画布的部分

2 个答案: