画像の特定の領域を選択して、その部分をキャンバス内に表示しようとしています。実際に何が起こっているかを確認するために、コードを単純なスニペットに減らしました。
<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 を正しく描画できないわけではありません。
他の誰かがこの問題に遭遇しましたか? 私にできることはありますか?