1

画像の特定の領域を選択して、その部分をキャンバス内に表示しようとしています。実際に何が起こっているかを確認するために、コードを単純なスニペットに減らしました。

<canvas id="myCanvas" width="400" height="300"></canvas>

(...)

imageObj.onload = function() {
        // draw cropped image
        var sourceX = 0;
        var sourceY = 0;
        var sourceWidth = 200;
        var sourceHeight = 200;
        var destX = 0;
        var destY = 0;
        var destWidth = 200;
        var destHeight = 200;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
};

実際の画像を使用すると、すべてが期待どおりに機能します (ここで jsfiddle を見ることができます)。

ここに画像の説明を入力

より高いテキスト品質を得るために、画像タグに pdf ソースを付与できる Safari 機能を使用します。ただし、キャンバスに同じ部分を描画しようとすると、jsfiddleでもわかるように、別の領域がレンダリングされます(Safari が必要です) 。

ここに画像の説明を入力

PDF は、実際には PDF ファイルとしてエクスポートされた元の JPG 画像 (Mac のプレビュー付き) であるため、サイズは同じです。さまざまなソースからのさまざまな PDF ファイルでこの問題が発生したため、これは PDFS の作成方法に起因する問題ではありません。コードで行う唯一の変更は、拡張子を jpg から pdf に切り替えることです。

キャンバスにフルサイズの画像を描画しても問題なく動作します。どちらのバージョンも同じ方法でレンダリングされるため、Safari がキャンバス期間に PDF を正しく描画できないわけではありません。

他の誰かがこの問題に遭遇しましたか? 私にできることはありますか?

4

0 に答える 0