キャンバス要素だけを印刷することは可能ですか？

StackOverflow https://stackoverflow.com/questions/172365

  •  05-07-2019
  •  | 
  •  

質問

いくつかの情報を入力できるWebページを作成し、その情報に基づいてキャンバス要素に画像を描画します。印刷を除いて、私が望むように動作しています。

キャンバス要素を印刷する方法、または描画する新しいウィンドウを作成する方法はありますか？

更新：

答えはとても簡単でした。もっと複雑な解決策を考えていました。

複数の回答を選べたらいいのにと思います。 *を使用して表示を無効にすると、キャンバスを印刷できませんでした。最も簡単な解決策は、@ media print {}内のCSSで{display：none;}のフォームを使用して、入力に使用していたフォームをオフにすることです。迅速な対応ありがとうございます。



    @media print {
           form {
         display:none;
       }
    }
役に立ちましたか？

解決

次のようなものを試すことができます：

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

デフォルトでキャンバスがブロックされているかどうかはわかりませんが、その線に沿って何かを試して、動作するかどうかを確認できます。アイデアは、ルールの優先順位が高い限り（他の任意の要素を除く）、印刷メディアのすべて（*）を非表示にするということです（これがIDセレクターを使用した理由です）。

編集：CSS3（具体的には否定擬似クラス）より多くのサポートがあれば、ルールは次のように簡単になります：

*:not(canvas) {
  display:none;
}

ただし、これにより<！> lt; html <！> gt;および<！> lt; body <！> gt;タグを非表示にし、キャンバスも効果的に非表示にします...

他のヒント

サポートについては100％確信はありませんが、CSSを使用して、<link>のmedia="print"タグに属性を入れることができます。このCSSファイルでは、印刷中に表示したくない要素を非表示にします。display:none;

印刷専用のキャンバスを作成してみてください：

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top