-1

私のプロジェクトでは、キャンバス (200*150) があり、サイズ (800*600) の画像を描画したいと考えています。その結果、画像が青くなります (滑らかでクリアではありません) が、その画像をimgタグに入れると、見栄えがよくなります。では、どうすればこれに対処できるでしょうか。ありがとう。

<img src="http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg"
width="200" heigh="150" />
<canvas id="my_canvas" width="200" height="150"></canvas>
<script type="text/javascript">
    window.onload = function () {
        var context = document.getElementById("my_canvas").getContext("2d");
        var image = new Image();
        image.src = "http://www.drivingkids.com/wp-content/uploads/2010/07/preschool-math-game-for-kids-math-racing-equatations.jpg";
        image.onload = function () {
            context.drawImage(image, 0, 0, context.canvas.width, context.canvas.height); //dx-30, GY-28, GW+50, GH+35
        }
    }
</script>
4

1 に答える 1

3

原因

ブラウザーは、現在のシナリオに応じて、品質またはパフォーマンスを優先できます。

ほとんどのページでは、通常、画質がパフォーマンスよりも優先されます。ただし、canvas のパフォーマンスは、たとえばダイレクト ブラウザ レンダリングや CSS ほど良くないため、canvas を使用した補間では、品質よりもパフォーマンスが優先される場合があります。ブラウザの実装に依存します。

解決

幸いなことに、サイズ変更と補間の負担を 2 つ (またはそれ以上) のステップで分割するか、必要に応じて 1 つの中間ステップで行うことで、これを回避する方法があります。

中間ステップでは、最初に画像を 50% オフスクリーン キャンバスにスケーリングします。次に、そのキャンバスを使用して最終的なサイズに描画します。より大きな画像の場合、より多くの手順が必要になる可能性があります。

新しいサイズを取得するための操作の合計により、合計で費やされる時間はほぼ同じです (より簡単に言えば、中間ステップ x2 で内挿する時間が少なく、x1 を内挿する時間が長くなります)。したがって、パフォーマンスが大幅に低下することはありません。

しかし、最も重要なことは、結果は単一のステップよりも優れているということです。

実装

これは、中間ステップを実装する方法です。

image.onload = function () {

     /// create an extra step for re-sizing image
     var tmpCanvas = document.createElement('canvas'),
         tmpContext = c.getContext('2d');

     /// set this canvas to 50% of image
     tmpCanvas.width = image.width * 0.5;
     tmpCanvas.height = image.height * 0.5;

     /// draw image step 1
     tmpContext.drawImage(image, 0, 0, image.width * 0.5, image.height * 0.5);

     /// draw image step 2
     context.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
}

デモ (概念実証)

オンラインデモはこちら

結果は次のようになります。

結果のスナップショット
左の画像: IMG 要素。右の画像: キャンバスの 2 つのステップ (Firefox でレンダリング)

ご覧のとおり、画像要素とキャンバス要素の間に目立った違いはありません。

于 2013-09-01T06:39:57.980 に答える