― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

返信する
ユーザー名:
件名:
オプション:
BBCode: ON
[img]: ON
[flash]: OFF
[url]: ON
スマイリー: ON
BBCode を無効にする
フォントサイズ:
フォントカラー
スマイリーを無効にする
URL を自動的にパースしない
ユーザエージェントを表示する
認証コード
KCaptcha by Nikita_Sp
   

トピックのレビュー - ページをまたぐcanvasやimgの2ページ目が印刷されない
作成者 メッセージ
  記事の件名:  Re: ページをまたぐcanvasやimgの2ページ目が印刷されない  引用付きで返信する
imgの方は解決策がありましたので、ご報告します。
canvasタグには効果ありませんでした。

大きなイメージをページまたがりで印刷する方法
 imgタグに、style="position: absolute;"
を設定すると印刷されます。


さらに、
自分の場合、大きなイメージの下に、小さなイメージを印刷する必要があったのですが、
この対応だけだと、小さなイメージが印刷されませんでした。
positionのtop指定が無効になるようで、2ページ目の先頭にしか印刷されなかったり、
どうしても思うところに印刷できませんでした。

topが効かないのでtopをあきらめ、上に配置したdivタグの高さheightを明示的に指定し
position:rerativ指定で位置を調整しました。
投稿記事 Posted: 2016年12月28日(水) 18:15
  記事の件名:  Re: ページをまたぐcanvasやimgの2ページ目が印刷されない  引用付きで返信する
詳細な検証および情報をありがとうございます。
情報、とても助かります。
確認したイメージの高さは、A4縦には1ページで収まるがA4横だと2ページにまたがるくらいのものです。

本来やりたいのは、imgではなくcanvasのほうで、高さはA4横で2ページにまたがる程度のものです。
Canvasの2ページ目が印刷されないので、
toDataURL
(
)
;でpngに変換してみてはどうかという考えにいたった次第です。
しかし、imgでも同じ現象が発生してしまうので質問させていただきました。

不特定ユーザに公開するHPで、IE、Chrom、Firefoxでの対応が仕様となっています。
アドオンのインストール、PDFに保存してからの印刷は認められないと思っています。
手に余る状態で、ほとほと困っていたところです。

教えていただいたbugzillaを説明し、対応不可能であることで交渉してみます。
日付が古いのが心配ですが・・・閉じていないので。

ご丁寧に、本当にありがとうございます。
投稿記事 Posted: 2016年12月27日(火) 09:53
  記事の件名:  Re: ページをまたぐcanvasやimgの2ページ目が印刷されない  引用付きで返信する
おそらく本件は、Firefox のバグだろうと思います。

kimura さんが書きました:
ページをまたぐcanvasやimgの2ページ目が印刷されません。
印刷プレビューにも表示されません。

Canvas のほうは存じませんが、画像については仰るようなことがあるのを知っています。
(参考)
・Bugzilla を "print" 、"large" 、"image" のキーワードで検索した結果
https://bugzilla.mozilla.org/buglist.cg ... 22image%22

kimura さんが書きました:
縦長なpng形式のイメージを作成し、IISサーバ(ローカル)で表示 → 印刷をすると1ページしか印刷されません。

「縦長」の程度や指定されている用紙サイズの組み合わせにもよるでしょうが、やはり極端に縦長の画像を含むウェブページは正常に印刷できないことが多いと思います。
ぼく自身はそういう事例に出会うことは少ないですが、画像の形式は PNG に限らず、JPEG や GIF などでも起こると思います。

ただし、画像に対して右クリックから [画像だけを表示] を実行し、ウェブページから画像だけを切り離して表示させると、その縦長画像をページに分割して印刷することはできるはずです。

kimura さんが書きました:
imgの場合のHTMLです。
別途、”testA.png”という名前の、縦長なイメージを用意しています。

例示された HTML ソースは、DTD が XHTML 1.0 Frameset で定義されながら、frameset 要素をまったく含まず body 要素だけしかありませんし、print.css が指定されています。ウェブページとして表示はできますが、テストサンプルとしては変則的な内容になり、ソース側の原因が問われる可能性も出てきます。
なので別途、ごく標準的な HTML5 のソースを作り、Firefox 本体に問題があるかどうかを試してみました。
testA.png は、〼 型を縦長にした 640px * 6400px の 8bit PNG 形式の画像を使いました。
実際のウェブページの在り様を考慮し、申し訳程度ですがテキストを上部に付加しました。

コード:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>印刷試験</title>
  </head>
  <body>
    <p>Print test of the large image -- 大きな画像の印刷試験</p>
    <img src="testA.png" alt="縦長画像のサンプルです。縦が6400pxあります。">
  </body>
</html>


これを Windows 7 上の Firefox 50.1.0 で表示させました。プリンターの用紙サイズ指定は A4判(縦)に設定されています。

画像を含むページ全体は、指定した通りに問題なく表示できました。

[印刷プレビュー] を実行すると、1ページ目には「Print test of the large image -- 大きな画像の印刷試験」のテキストだけが表示され、2ページ目にはご質問にあるような状態で画像の一部のみが表示され、本来続くべき3ページ以降は生成されませんでした。
Firefox の印刷における特徴ですが、画像をページ内に納めきれない場合、強制的に次のページに送り出す動作になるようです。ちょうど、欧文テキストにおけるワードラップのような動作といばいいでしょうか。

バリエーションとして、[印刷プレビュー] 画面の [拡大/縮小] で [ユーザ設定] を選択し、「10」の値(元のサイズの 10 %に縮小)を指定すると、テキストと画像は1ページ内に納まりました。が、当然ながらテキストの可読性はゼロに近いです。

比較として、同様の条件で Vivaldi 1.6.689.40 を使って、ページの表示と印刷プレビューを試しました。
ウェブページとしての表示は Firefox と大差ありません。
プレビューでは、Firefox のようにテキストと画像が別ページに分割されず、ウェブページの状態と同じように表示され、画像については、1ページに納まらない分は順番に次のページに描画されました。全体で7ページでした。
ウェブページの印刷(とプレビュー)としては、Vivaldi のほうが自然で、納得できました。

(考察)
1枚の縦長の画像を Firefox で印刷することが目的なら、上述のように画像だけを表示することで、さしあたって画像をページ分割して印刷できると思います。

画像を含むウェブページ全体をそのとおりに印刷することが目的なら、一手間かかりますが、
・FireShot(完全なWebページのスクリーンショット)
https://addons.mozilla.org/ja/firefox/addon/fireshot/
のようなアドオンを使い、いったんページ全体のキャプチャを、画像や PDF で出力した後、それを印刷するという方法が考えられます。

ウェブページ制作の観点で、標準状態の Firefox ユーザーも印刷可能なページに仕上げたいということなら、ぼくの手には余る問題です。
根本的には、Firefox 側の修正を待つしかない気がします。

(余談)
ただ一介のエンドユーザーの立場で申し上げるなら、事例で挙げた 6400px の縦サイズは極端だとしても、標準的なディスプレイの大きさと解像度を考えれば、1600px の縦サイズでも十分大きな画像だと思います。ウェブページ内に指定された1枚の画像が、最初からブラウザの画面内に入りきらない(全体を表示できない)前提で配置されるのだとすると、ページの設計としてはどうなの? という疑問が残ります。
(以前、紙のカタログを高解像度でキャプチャしたと思われる大きな縦長画像を貼り付けたページを見たことがありますが、テキストであるべきコンテンツさえ画像化されているので、アクセシビリティの観点からも最悪の部類でした。)

個々のユーザーの画面サイズを事前に特定することはできないにしても、ウェブぺージ内には大きめのサムネイルを表示させ、それをクリックすると原寸の画像が開かれるなどの方式のほうが、利用する側としてはまだマシな気がします。
背景など装飾用の画像であれば、バックグラウンドでの処理になりますから、そういう条件で扱うことになるのでしょう。自分ではやったことがありませんが、大きめの画像をタイルに分割して、JavaScript でそられを動的に配列するという方法などが考えられそうです。
(フォアグラウンドの画像でも、コピー抑止の観点からブロック分割しておくケースがあるのは、聞いたことがあります。)

解決策でなく申し訳ないですが以上です。的外れな話になっていたらすみません。
投稿記事 Posted: 2016年12月27日(火) 08:06
  記事の件名:  ページをまたぐcanvasやimgの2ページ目が印刷されない  引用付きで返信する
ページをまたぐcanvasやimgの2ページ目が印刷されません。
印刷プレビューにも表示されません。


IE11やChromeでは印刷されます。


Firefox 50.1.0

Win7


ページをまたぐ縦長なcanvasに対し、JavaScriptにて"window.print()"で印刷すると、

2ページ目が空白で印刷されてしまいます。印刷プレビューも2ページ目は空白です。

imgは症状が違っています。
縦長なpng形式のイメージを作成し、IISサーバ(ローカル)で表示 → 印刷をすると1ページしか印刷されません。

印刷プレビューで見ても1ページだけで2ページ目が存在せず、ページをはみ出した部分は見切れています。
印刷プレビューで縮小して1ページに収まる倍率にすると最後まで表示されます。


また、A4縦1ページに収まるサイズのイメージなら、A4縦では1ページに最後まで表示されますが、
A4横にしても1ページしか表示されず、下が見切れています。








imgの場合のHTMLです。
別途、”testA.png”という名前の、縦長なイメージを用意しています。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>印刷試験</title>
<style type="text/css">
body {
font-family: 'MS Gothic';
}
</style>
<style type="text/css" media="print">
head{
display: none;
}
body {
zoom: 1.00;
}
* {
overflow: visible !important;
}
@import " print.css " print;
</style>
</head>
<body id="body">
<img src="testA.png"/>
</body>
</html>



心当たりがありましたらよろしくお願い致します。
投稿記事 Posted: 2016年12月25日(日) 16:17

All times are UTC + 9 hours


ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean