html5キャンバスの一部を印刷します

Question

私はhtml5キャンバス（3000px x 3000px）を持っています。私はキャンバスを印刷するには、以下の機能を使用しています：

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

問題は、私は唯一のキャンバス上の要素（例えば円）とプレスプリントを持っている場合、それはキャンバス全体をプリントアウトしようとしている（3000 ×3000）。キャンバスの特定のセクションだけを印刷するか、または要素があり、空白を印刷しない部分だけを印刷するように変更する方法はありますか？

ありがとうございました。

Answer 1

もう1つの答えは適切なアプローチです。主な問題は、境界を見つけることです。私は、全ての画像データを取得し、forループ2で境界を見つける：

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

次の操作を行うことができ、あなたがオブジェクトを追跡し、再描画する方法を持っていると仮定すると：

1. は、すべてのオブジェクト
2. は新しいキャンバスそのバウンドのサイズを作成します含めることができる最大の境界を計算します
3. 領域を描画するには、drawImage()のクリッピングパラメータを使用しますが、バインドされた開始位置のオフセット-xと-yを使用します。

代わりに一時キャンバスを印刷します。

更新：背景の透明度を仮定して、画像コンテンツのエッジのみを見つけるには、this answerを参照してください。