1

昨日、私はすでにこの問題について質問しました。しかし、何が問題なのかわかりませんでした。今日、私はそれがdrawImageコマンドのsourceWidthに関するものであることを知っています。

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

そこで、新しいトピックを開いて古いトピックを削除することにしました。

しかし、最初から始めましょう。私は、歴史的文書に自家製の「ズーム機能」を実装しようとしています（下の画像を参照）。Firefoxでは正常に動作しますが、他のブラウザでは動作しません。

Firefoxの動作

ChromeまたはInternetExplorerでは、次のようになります。ズームエリアは空です。

Chromeの動作

画像を描画するだけで、トリミングせずに画像が表示されます。

context.drawImage(imageObj, 0, 0);

しかし、必要なすべての値（sourceWidth = 1800）でcrop関数（html5canvastutorials.comで説明）を使用しようとすると、キャンバスに画像が表示されません。興味深いことに、sourceWidthを400以下のような低い値に変更すると、画像が描画されます。元の画像サイズ（600x900など）やキャンバスの幅のimageObj.onload調整だけでなく、何も変更されません。

4

1 に答える 1

1

私は自分の問題の解決策を見つけました。それはとについてsourceWidthですdestX。些細な問題だったと思いますが、この状態は知りませんでした。次のコマンドについてです。

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

imageWidth - destX = sourceWidthsourceWidthが大きい場合、Chrome、IE...が画像を描画しないことを確認する必要があります。Firefoxがなぜそれに対処できるのかわかりません。

数値例 を次に示します。 imageWidth = 1024、左側の200pxを切り取りたいのでdestX = 200、sourceWidth < 824。

于 2012-05-01T20:49:35.860 に答える