打印html5画布的部分

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

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

的问题是，如果我在画布（比如一个圆），然后按打印上有唯一的元素，它会尝试打印出整个画布（3000 ×3000）。有没有办法改变它，所以它只打印画布的某个部分，或者只打印有元素的部分，而不打印出空白区域。

感谢。

来源

2017-02-17 Tahmid

如果下面的答案不适合你，请发表评论。 –

另一个答案描述了正确的方法。主要问题是找到边界。我得到的所有图像数据，并在两个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。

来源

2017-02-24 18:00:50

谢谢。我很感激帮助。 – Tahmid

@Tahmid有没有解决这个问题？ –

假设你有一个方法来跟踪和重绘的对象，你可以做到以下几点：

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

改为打印临时画布。

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

来源

2017-02-17 20:01:33 K3N

打印html5画布的部分

回答

相关问题