Pdf.js: ランダム/明らかな「太字」/破損

すべてのビューで大量のダウンロードが発生するため、ワーカーを無効にすることはできません。

この部分を説明してもらえますか？

getDocumentを複数回使用する場合は、単一のPDFWorkerインスタンスを使用してください。 フォントが破損する原因を特定するのは難しいですが、実際の例へのリンクがあると、ある程度の光が当てられる可能性があります。 問題の原因となる例を作成/公開できますか？

わかりました。リンクを簡単に公開することはできません。 ワーカーを有効にして実行すると、100％機能します。 無効化フラグを設定すると、上記の問題がランダムに発生します。おそらく4つのインスタンスが1つあります。

ワーカーを無効にする「理由」を詳しく説明することで、「ワーカーを有効にするだけ」という応答を避けていました。つまり、大量の小さなPDFをかなり高速に表示し、pdf_worker.jsの1.2Mbダウンロードを追加しました。各ディスプレイは実用的ではありません。 Webワーカーのコードを調べて、ワーカーが呼び出された.jsスクリプトをキャッシュするオプションがあるかどうかを確認しましたが、何も見つかりませんでした。

私の最初の推測（効果に基づく）は、インスタンスごとにスクリプトがロードされると正しくクリアされるグローバルスコープを持つものがどこかにあり、スクリプト化されたワーカーを繰り返し再利用すると問題が発生するというものです。 ただし、（！）最初のPDF表示で問題が発生する可能性があるため、何を見るべきかわからないので少し迷っています。

ワーカーを無効にする「理由」を詳しく説明することで、「ワーカーを有効にするだけ」という応答を避けていました。つまり、大量の小さなPDFをかなり高速に表示し、pdf_worker.jsの1.2Mbダウンロードを追加しました。各ディスプレイは実用的ではありません。

@oddjobz私はまだ懸念を理解していません。 無効化されたワーカーを使用すると、pdf.worker.jsを_まだ_ダウンロードしますが、メインスレッドで発生しています。 Webサーバーで適切にセットアップすると、静的javascriptファイルをキャッシュでき、追加の作業なしでリクエストごとに1.2Mbのダウンロードを回避できます。 PDFWorkerは、Webワーカーのインスタンスを単一のページにキャッシュするのに役立ちます（たとえば、複数のgetDocumentsが実行された場合）。

この問題がソリューションのコードなしで完了したかどうかはわかりません。デフォルトでは、PDF.jsは、標準のブラウザーを備えた標準のWebサーバー（デフォルトの構成）で使用すると、Webワーカーのコードをキャッシュします。

さて、私が使用しているコードとあなたが持っているコードの違いはわかりませんが、どこかに違いがあります。 まず、ワーカーを無効にすると、pdf_worker.jsは最初のヒット「のみ」で1回ロードされます。 ワーカーを有効にすると、新しいドキュメントごとにコードが読み込まれ、キャッシュに影響を与えることはないようです。 （つまり、キャッシュされていません）Chrome開発者がWebワーカーとキャッシュされたコードに問題を抱えていたため、キャッシュをオフにしたのではないかと思います。 私が見る限り、すべてのヘッダーはキャッシュ用であるはずですが、キャッシュは発生していません。 （他のものはキャッシュされますが）

関連するビットが3つあります。
a。 スクリプトタグ付きのメインコードブロック
b。 グローバル変数を設定するオンロード
c。 PDFをDIVに表示するスタンドアロンクラス

メインコードブロック;

<script type="text/javascript" src="js/compatibility.js"></script>
<script type="text/javascript" src="js/pdf.js"></script>

オンロードコード;

    PDFJS.disableWorker = true;
    PDFJS.verbosity = PDFJS.VERBOSITY_LEVELS.debug;
    PDFJS.workerSrc = "/js/pdf.worker.js";

クラス定義;

JS.require('JS.Class',function(Class) {

    CLASS.PDFViewer = new Class({

        locked  : false,
        page        : 0,
        pages   : 0,
        pdf     : null,
        doc_id  : null,

        initialize: function(prefix) {
            this.canvas   = prefix+'-canvas';           // Canvas element ID we'll be rendering to
            this.prefix   = prefix;
            this.id_page  = '#'+this.canvas+'-page';    // Ident of page number
            this.id_pages = '#'+this.canvas+'-pages';   // Ident of page count
            this.setfocus(null);                        // Element to focus after render
        },
        reset:      function() { this.now_showing = null; console.log("PDF Reset")},
        set:        function(doc_id) { this.doc_id = doc_id; console.log("Docid:",doc_id) },
        load:       function() { this.fetch(this.doc_id); },
        set_doc:    function() {},
        setfocus: function(field_id) { this.focuson = field_id; },

        decode: function(base64) {
            var raw = atob(base64);
            var uint8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
                uint8Array[i] = raw.charCodeAt(i);
                }
          return uint8Array;
        },

        full_screen: function() {
            if( $('#'+this.prefix+'-hide-me').is(':visible') ) {
                $('#'+this.prefix+'-hide-me').hide();
                $('#'+this.prefix+'-full-screen').removeClass("col-sm-7");
                $('#'+this.prefix+'-full-screen').addClass("col-sm-12");
            } else {
                $('#'+this.prefix+'-hide-me').show();
                $('#'+this.prefix+'-full-screen').removeClass("col-sm-12");
                $('#'+this.prefix+'-full-screen').addClass("col-sm-7");
            }
            this.turn_page();
        },
        focus: function() {
            if(this.focuson) {
                console.log("SetFocus>>",this.focuson);
                setTimeout("$('"+this.focuson+"').focus()",100);
                this.focuson = null;
            }
        },
        display: function(pdf) {
            this.pdf = pdf;
            $(this.id_pages).text(this.pdf.numPages);
            this.pages = this.pdf.numPages;
            this.page = 1;
            this.turn_page();
        },
        fetch: function(rid) {
            if(this.locked) return false;
            var self = this;
            var src = '/images/default.pdf';
            function success(data) {
                if(!LIB.check_error(data)) return false;
                if(data.pdf) src = self.decode(data.pdf);
                self.locked = true;
                PDFJS.getDocument(src).then(function(pdf){ self.display(pdf); });
                return true;
            }
            ionman.call('nac.rpc.pdf_spec',{'rid': rid},success)
            return true;
        },
        turn_page: function() {
        var self = this;
            self.pdf.getPage(self.page).then(function(page) {
                var canvas = document.getElementById(self.canvas);
        var ctx = canvas.getContext('2d');
        var unscaledViewport = page.getViewport(1.0);
                canvas.width = $('#'+self.canvas).width();
                var scale = canvas.width / unscaledViewport.width;
                var viewport = page.getViewport(scale);
                canvas.height = viewport.height;
            var renderContext = { canvasContext: ctx, viewport: viewport };
        page.render(renderContext).promise.then(function(){
                setTimeout(function(){
                    self.locked = false;
                        self.focus();
                    },250);
                });
                $(self.id_page).text(self.page);
            });
        },
        next: function() {
            if( this.page == this.pages) return;
            this.page += 1;
            this.turn_page();
        },
        prev: function() {
            if( this.page == 1) return;
            this.page -= 1;
            this.turn_page();
        }
    });

私もです;

var viewer = CLASS.PDFViewer('pdf');
viewer.fetch();

そして、デフォルトのドキュメントはID「pdf-canvas」のDIVです。

これを試してみましょう：

1. Chromeでhttp://mozilla.github.io/pdf.js/web/viewer.htmlを開きます
2. ネットワークページでdevtoolsを開き、分割コンソールを表示します（このタブで「esc」を押します）
3. 例外がキャッチされていないことを確認します（例外ブレークを無効にし、それ以外の場合は更新します）
4. 「キャッシュを無効にする」がオフになっていることを確認します（チェックを外して更新します）。
5. コンソールで、 PDFJS.getDocument('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')実行します
6. 2番目の「pdf.worker.js」のステータスが「200OK（キャッシュから）」であることに注意してください

コードスニペットは役に立ちません。 小さな例をどこかにデプロイしてください（例：githubページ）

はい、わかりました..これは私が使用しているPDF.jsの最新バージョンのようです..違いが問題ではないと仮定して、Varnishが出力しているヘッダーをWebサーバーと比較して確認しますなぜキャッシュされないのかがわかります。

Chrome開発者はWebワーカーとキャッシュされたコードに問題があったため、キャッシュをオフにしたのではないかと思います。

これとdisableWorkerオプションの間に関係がありません。 pdf.worker.jsは、trueまたはfalseに関係なく要求されます。 したがって、問題はキャッシングとは無関係である必要があります。

簡単にするために、disableWorkerモードでのメッセージングの動作に関連していると思います（これは実際にはテストされておらず、レガシーブラウザーとデバッグの容易さをサポートするためにのみ作成されています）。 問題が見える（オンラインでアクセスできることが望ましい）テストケースを最小限に抑えるために、問題を絞り込むのに役立ちます。

さて、これは興味深いです..ダミー証明書（ホスト名！= localhost）でlocalhost：8443に対してテストすると、キャッシュされません。 有効な商用証明書を使用してライブサーバーのポート443に対してテストすると、キャッシュ（！）が実行されます...それをどうすればよいかよくわかりません..少し時間があれば、さらにテストを実行しますが、次に、Webワーカーを有効にして、何が起こるかを確認します。 （しかし、どこかにまだ問題があると思います...）

私は私を信じているかどうか完全にはわかりません..だから私はいくつかのスクリーンショットを追加しました...

キャッシュを無効にすることは間違いなくチェックされていません...
（Webサーバーの構成は同じです）

ここで他にやるべきことはありますか？ 私が理解していることから、これはPDF.jsのバグのように聞こえるのではなく、カスタム実装のバグのように聞こえます。

この（断続的な？）失敗を再現できるテストケースがあると便利です。

これはバグです。オンラインデモを作成しますが、コーディングと少し時間がかかります...

こんにちは、私は同じ問題を抱えています。

ここにはカスタムは何も書かれていません。Githubからリポジトリをダウンロードしただけです。

@ subhadip-codeclouds同じ問題はないと思います。 別号を開いて、要求された詳細を提供してください。

@ subhadip-codecloudsこのPDFはどこにありますか？ 同様の問題が発生しているので、テストケースとして使用したいと思います。

Chromeを搭載したUbuntuで同じフォントレンダリングの問題が発生していると思います（他のプラットフォームはテストしていません）。 私はマスターから最新のpdf.jsを使用しています、そして時にはPDFは@oddjobzのPDFのようになりますし、時にはそれが@ subhadip-codecloudsのPDFのようになります。 これはランダムなPDFでランダムに発生するようです。

何が悪いのか、どうやって確実に再現するのか、よくわかりません。 ただし、これはシナリオです。 私はReactを使用して、動的な単一ページのWebサイトを構築しています。 ユーザーはタブをクリックすることが多く、それによってiframeが作成され、iframe内にpdf.jsが表示されます。 Reactと私のウェブサイトが機能する方法を考えると、iframeは何度も作成され、破棄されます。 しばらく時間がかかる場合がありますが、最終的には常にフォントレンダリングが破損します。 そして、1つのPDFで発生すると、他のPDFでもランダムに発生し始めます。 常に問題ないものもあれば、そうでないものもあります。

何が起こっているのかを理解するためにオンにしたり、実行したりできるもの（デバッグフラグなど）はありますか？ コンソールにエラーや警告は表示されません。

これは、ほとんどの場合、起動時にフォントレンダリングが破損するPDFです。
https://datalanche-sec-public.s3.amazonaws.com/filings/0001047469-15-008315/a2226328zex-31_2.htm.pdf

もう一つ。 同じURLでChromeで新しいタブを開くと、PDFが修正されます。 ただし、同じタブにとどまり、まったく別のWebサイトに移動してから、（戻るボタンを使用せずに）自分のWebサイトに移動すると、フォントが破損しているPDFはまだ破損しています。 何が起こっているのかがタブのメモリやキャッシュを破壊しているように見えます。

Chromeのキャッシュの問題である可能性があります（詳細については、https：//github.com/mozilla/pdf.js/issues/7751#issuecomment-256683285を参照してください）。

これに関する更新はありますか？ 同じ問題を抱えている

私はまだ時々これを（不可解に）見ますが、それは非常にまれであり、実際に十分にまれであり、私は本当にそれについて心配するのをやめました。 私が抱えていると思われる問題は、操作の重複でした。 別の操作がまだ進行中のときにPDFドキュメント（たとえば次のページ）を操作できるように「思われます」。これが問題の原因のようです。 私の解決策は、すべての操作をクラスでラップしてから、入口と出口のポイントにマスターロックを挿入して、PDF関連の操作が競合しないようにすることでした。これにより、問題が修正されたようです。 pdfのものは別のスレッドまたはワーカープロセスで実行されると漠然と想定しているため、競合が発生する可能性があります。 少し前のことですが、メモリからはスレッド化はオプションだと思い、無効にすることで解決策を見つけました。これはパフォーマンスに悪影響を及ぼしましたが、問題は解決しました。

それはいつも私に起こります、しかしそれは私がテストケースを作成することができないほど十分にランダムです。 しかし、私の場合もスレッドによるメモリ破損である可能性は十分にありますが、Javascriptはシングルスレッドだと思いましたか？

Javascriptはシングルスレッドだと思いました

です。 @oddjobzの意味（？）は、一度に複数のHTML5キャンバスにペイントすると、Chromeにバグが発生する可能性が高いと思います。 しかし、再現可能なテストケースがなければ、推測してChromiumのバグに対する意味のあるレポートを作成することは困難です。

私は（メモリから）「webworkers」と呼ばれる新しいブラウザ機能を使用するオプションを採用していると思います。これにより、JavaScriptスレッドを効果的に作成できます。この機能をオフにしてから「大きな」PDFを表示してみてください。この機能が使用されている「理由」を参照してください... :)

「Webワーカー」と呼ばれる新しいブラウザ機能を使用するオプションを採用しています...
この機能をオフにしてから「大きな」PDFを表示しようとすると、この機能が使用されている「理由」がわかります。

OPがこの機能をオフにするように指示していることに注意してください。これは、Webワーカーが使用されていないことを意味し、ブラウザに責任を負わせ、JavaScriptの「スレッド化」とは関係ありません。

少し微妙です。Javascriptはシングルスレッドですが、Chromeはマルチスレッドです。Webワーカーを使用すると、2つのChromeプロセスを実行して、それらの間の通信を容易にすることができます。 マスターだけがDOMアクセスを取得すると思いますが、UIスレッドをブロックすることなく、プロセッサを集中的に使用するものにサブスレッドを使用できます。 特定のスレッドやタブに接続されていないWebワーカーを作成できると、ページのリロード後も効果的に存続できる（つまり、永続的である）と、さらに楽しくなります。 これに起因する多くの問題が発生しているのがわかります...

もちろんですが、私のコメントでは、スレッド化を行わなくても（つまり、独自のスレッドレベルのロックを実装することで）、この問題の99％が解消されます。 （私のために）。

@ oddjobz 、 @ rpedelaは、ハードウェア/ GPUアクセラレーションを無効にして、問題が引き続き発生するかどうかを確認します。

@yurydelendik 、

@yurydelendik 、私のアプリケーションは6か月以上公開されています。残りの問題が「異なる」ものであり、ユーザーエラーまたは時折奇妙なドキュメントである可能性が高いことを嬉しく思います。 私が抱えていた問題は、一貫性はありませんが100％再現可能でしたが、それはなくなりました。 これは（IMHO）ドキュメント操作間の重なり、つまり、前の操作が終了する前に開始するプロセス（スレッド化の有無、前の操作が終了する前に開始する操作を防ぐために手動ロックを設定）が原因で発生しました。 簡単に再現できる例は、ドキュメントをすばやく前方にスキャンし、前のページのレンダリングが完全に完了する前に「次の」処理を開始することでした。

Javascriptはシングルスレッドですが、Chromeはマルチスレッドであり、Webワーカーを使用すると2つのChromeプロセスを実行し、それらの間の通信を容易にします。 マスターだけがDOMアクセスを取得すると思いますが、UIスレッドをブロックすることなく、プロセッサを集中的に使用するものにサブスレッドを使用できます。

「webworker」という用語を含むこのステートメントは混乱を招きます。 上記のステートメントを検証するための参照を提供できますか？ Web Workersは設計上DOMにアクセスできず、PDF.jsはメインスレッドでペイントを実行します。 Chromeのレンダリングプロセスを意味しますか？ それでも、DOMを更新する唯一の方法は、Webワーカーからではなく、メインスレッドからです。

前のものが終了する前に開始するロチェス-スレッド化するかどうか、前のものが終了する前に操作が開始されるのを防ぐために手動ロックを入れて修正しました。

この文脈での「操作」とは正確にはどういう意味ですか、それはAPIのrender()呼び出しの存続期間ですか？

@oddjobzスレッドをもう一度読んだところ、さまざまな期間で競合するステートメントがたくさんあります。 また、構成セクションも競合しています。たとえば、MacOSXのどのブラウザでもローカルで再現できません。 標準のビューア（カスタムビューアではない）で再現できるかどうかはまだわかりません。 他のスレッド参加者を混乱させないために、このバグを無効/不完全として閉じます。

@oddjobz、@rpedela、@badams、@pholisma、@ subhadip-codecloudsます（PDFを含む）問題を再現することができたときに問題と正確な手順を経験している正確な構成（複数可）と別のバグレポートを提供することができますか？ カスタムソリューションの場合は、パブリックリンクを提供します。

わかりました、これは問題のコードです-あなたは適切な修正を見ることができます。

特にロックのために、私はそのようなルーチンを持っています。

this.locked = true;
PDFJS.getDocument(path+doc_id).then(function(pdf) {
    $('#pdf-canvas-pages').text(pdf.numPages);
    self.pages = pdf.numPages;
    self.page = 1;
    self.pdf = pdf;
    pdf.getPage(1).then(function(page) { self.turnpage(); });
})

turnpage: function() {
    var self = this;
    self.pdf.getPage(self.page).then(function(page) {
        var canvas = document.getElementById('pdf-canvas');
        var ctx = canvas.getContext('2d');
        var unscaledViewport = page.getViewport(1);
        canvas.width = $('#pdf-canvas').width();
        var scale = canvas.width / unscaledViewport.width;
        var viewport = page.getViewport(scale);
        canvas.height = viewport.height;
        var renderContext = { canvasContext: ctx, viewport: viewport };
        page.render(renderContext);
        $('#pdf-canvas-page').text(self.page);
        self.locked = false;
    });
},

はい、これが私がその時点で要点を押し付けなかった理由です。問題があることを受け入れることすら非常に気が進まないようです-それは言うまでもなく、修正する必要があります。

上記のスニペットの問題は、 https：//github.com/mozilla/pdf.js/pull/6571によって対処されました

ええと、私は2016年半ばに最新バージョンを使用していましたが、まだ問題がありました。 当時（繰り返し）修正されたと言われたことを覚えているようです。 （そして他の多くの人のように、私はそれが明らかにそうではなかったのを見ることができました）

とにかく、同じ問題が発生している人は、上記のようにロックを押し込んで、違いが生じるかどうかを確認してください..たった2行です...

@yurydelendikこれはユーザー（主にWindows 7を使用）でかなり一貫して発生していますが、最新バージョンのOSXで再現できましたが、100％一貫しているわけではありません。

カスタムコードは使用せず、次の手順を実行するだけです。

<iframe
    style="height: 650px; width: 600px"
    src="/path/to/pdfjs/web/viewer.html?file=/path/to/file.pdf"
/>

ドキュメントに他の太字のテキストがあるかどうか、初期ズームレベル（ズームインおよびズームアウトすると修正される場合があります）など、いくつかの要因に依存しているようです。これはプレビューにのみ影響することにも気づきました。印刷すると、pdfをダウンロードすると、完全にレンダリングされているように見えます（pdf.jsが提供されたファイルをユーザーに渡しているだけだからだと思います）。

このソリューションを使用せずにファイルをユーザーのマシンに直接ダウンロードすることにしましたが、昨日はすでにこのバグを追いかけていたので、再現可能なテストケースを考え出すために少し時間を割いてみます。

@badams 、次/前のページと同様に、ズームも修正されたことを確認できます。 また、太字で問題が発生しやすくなっているという印象もありました。

再現可能なテストケースを考え出すために少し時間を割いてみますが

@badamsのおかげで、寄稿者が自分のコンピューターで問題を再現しようとしているときにすべてのバリエーションをとるものはすべて機能し、オンラインで公開された完全な例が最も効果的です（完全な例はgithubリポジトリのgh-pagesブランチで公開できます）。

こんにちは、みんな、

私はこの全体の話を正しく理解していませんでした。
すでに修正はありますか？ または私がすべきある種の実装？

よろしく、
タルシシオペレイラ

私はこの全体の話を正しく理解していませんでした。

私は誰もそうしないと思います。

このスレッドは、問題を再現するための正確な手順を提供していないため（およびコメント内の誤解を招く推奨事項のため）、閉じられました。 問題が100％再現可能であるとは期待していませんが、少なくとも10回に1回は発生するようにすることは素晴らしいことです。

PDF.jsがこのように実行されたり、コードにバグが発生したりする可能性のある項目：

• HTTPサーバーまたはブラウザーがHTTP範囲要求を適切に処理しない
• ブラウザがフォントの読み込みやキャンバスの操作を適切に処理していません
• カスタムソリューションが上記の操作と競合する

FWIW pdf.js（v1.7.376）のデプロイで、まれな状況でこの破損が発生しています。 範囲リクエストの処理は正しいようです。 信頼できる再現手順が見つかったら報告します...

この問題はChromeでのみ発生し、ズームを変更すると消えます。 そのため、 showPreviousViewOnLoadをfalseしましたが、この問題は二度と発生しませんでした。

@TZanke showPreviousViewOnLoadを削除するとズームが変わる理由を明確にできますか？ ありがとう！

@tonyjin pdf.js autozoomはズーム値を計算し、それをローカルストレージに保存します。 ページをリロードした後、自動ズームは使用されず、代わりに以前に計算されたズーム値が使用されます。 また、この値の再読み込みに問題があるようです。

したがって、 showPreviousViewOnLoad無効にすると、自動ズーム機能が毎回起動し、ページが正しくズームされ、レンダリングの問題は発生しません。

@ TZanke-私はあなたのアプローチを試しましたが、残念ながら、問題はまだ時々ポップアップします.. :(