2

私はHTML5とJavaScriptを初めて使用し、canvas要素を使用して高品質の出力画像を作成しようとしています。

  1. 現在の目的は、ユーザーが自分のすべての画像（jpeg、png、svg）を使用できるようにすることです。これは魅力のように機能します。ただし、画像をレンダリングすると、常に32ビットのpngになります。JavaScriptを使用して（できれば）より高品質の画像を作成するにはどうすればよいですか？
  2. ファイルを出力すると、常にキャンバスと同じ解像度を維持しているように見えますが、JavaScriptを使用してこれを変更するにはどうすればよいですか（できれば）

Advanceの皆さんのおかげで、しばらく見回しましたが、これに対する答えが見つかりませんでした:(

4

2 に答える 2

3

getImageDataまたはtoDataURLを使用してより大きな画像を作成する場合は、次のことを行う必要があります。

  1. 通常のキャンバスよりも大きいメモリ内キャンバスを作成します
  2. シーン全体をメモリ内のキャンバスに再描画します。画像を拡大縮小するためにメモリ内のコンテキストを呼び出すことctx.scale(theScale, theScale)をお勧めしますが、これは最初に画像がどのように作成されたかに大きく依存します（画像？キャンバスパス？）
  3. 通常のキャンバスではなく、メモリ内のキャンバスでgetImageDataまたはを呼び出すtoDataURL

インメモリキャンバスとは、次のことを意味します。

var inMem = document.createElement('canvas');
// The larger size
inMem.width = blah;
inMem.height = blah;
于 2012-10-15T03:10:18.110 に答える
-1

まず、画像をキャンバスに描画すると、まだpngではありません。これは、メソッドを呼び出すときにキャンバスAPIが機能する単純な生のビットマップであり、ブラウザに表示するためにpngに変換されます。を使用すると、それが得られますtoDataURL。使用toDataURLする場合、出力する画像形式を選択できますが、pngとともにjpegとbmpがサポートされていると思います。（別の形式に変換されたpngとは考えないでください。そうではありません）

また、ピクセルにビットを追加することで高品質とはどういう意味か正確にはわかりません。すべてのRGBAチャネルが8ビットの深さのトゥルーカラーを使用するには、32ビットで十分であり、人間の目よりも多くの色を使用できます。すぐに見てください。ユーザーがあなたの写真にさらされる照明と角度に応じて、彼の色の知覚は変わるかもしれませんが、品質は変わらないかもしれません。私が言うだろうそれの解像度だけに依存します。とにかく、キャンバスはそれらのより深い色で動作するように設計されていませんでした。正直なところ、キャンバスにレンダリングできるあらゆる種類のシーンでは、多くの色情報は必要ありません。これは、大規模なスタジオで作成された高解像度の映画やゲームにのみ関連します。 、キャンバスに濃い色を使用できたとしても、それは実際にはユーザーのビデオカードと画面のサポートに依存しますが、大多数の人は持っていないと思います。

各ピクセルの色に直接関係しないが、潜在的な変換に関する情報を追加したい場合はimageData、キャンバスAPIで受け入れ可能なものを実行できる独自のタイプを作成し、32ビット形式と追加情報を維持することをお勧めします。対応するアレイ上。

はい、出力画像の解像度はキャンバスと同じですが、最終的な構図のサイズを変更する方法がいくつか用意されています。Simon Sarrisが言ったように、オフスクリーンキャンバスを作成します。このキャンバスの解像度は、画像の最終的な解像度になります。次に、次のいずれかを実行できます。

  1. サイズ変更パラメーターを使用しdrawImageて生成された画像を提供しながら呼び出すことにより、ラスター画像のサイズを変更しますtoDataURL
  2. サイモンが言ったように、そこでシーンを再描画します。これにより、画像ファイルだけでなく、キャンバスAPIを介して作成された形状がコンポジションに含まれている場合、品質の低下が減少します。

事前に最終的な解像度がわかっている場合は、キャンバスの幅と高さを設定するだけですが、CSSの幅と高さは、キャンバスがWebページに収まるように別の方法で設定できます。

于 2012-10-16T03:40:51.940 に答える