1

HTML / CSS / Javascriptで作成されたWebベースの実験で刺激として提示するために、png形式で保存したチャートとテーブルをたくさん作成しました。表示したときにシャープに見えるようにするにはどうすればよいですか?

実験で表示されたときの現在の外観のサンプルを次に示します。

サンプル

ご覧のとおり、線はギザギザになっていて、時には消えてしまうほど細く、テキストにも同様の問題があります。これは、png 画像の「自然な」サイズ (約 3500x2500 ピクセル) が表示サイズ (高さ約 200 ピクセル) よりも大きいためだと思いますが、手動ですべてのサイズを変更せずに、表示時にこれを修正する方法が必要だと思います。画像。

ここにいくつかの歴史があります: これらはすべて Excel で作成され、Powerpoint にコピーされ、そこから画像として保存されました。元々、Powerpoint から直接保存したのですが、デフォルトでは .jpg 形式になり、ぼやけてしまいました。次に、.emf に保存しようとし、IrfanView を使用して .png として再保存しました。結果として得られる png は、画像ビューアーを介して自然な (大きい) サイズで表示すると非常にシャープですが、はるかに小さいサイズで html に埋め込むと、上記のようにかなり見栄えが悪くなります。

4

2 に答える 2

1

エクセルファイルはまだですか？その場合、次のことができます。

  1. グラフを PDF ファイルとして Excel にエクスポートします。
  2. 次に、PDF を Inkscape などのベクター プログラムにインポートします。
  3. 名前を付けて保存し、イメージ タグを使用する場合と同じようにファイルsvgを参照します (直接埋め込むこともできます)。svg

PDF としてインポートすると、ベクター グラフィックになるため、必要に応じていくつかのポイントをさらに編集できます。

于 2012-11-20T22:12:29.430 に答える
0

画面上の線は、1 ピクセル未満の太さでは見栄えがよくありません。

たとえば、画像に 3 ピクセルの厚さの要素があるとします。250 X 250 にサイズ変更すると、厚さが 0.3 ピクセルになります -> 良くありません。

それが、線の端や角で説明した望ましくない効果を生み出します。

この問題に対処するには、次の 3 つの解決策が考えられます。

  • 元のソースから低解像度の画像の別のコピーを作成します (Excel チャートのスクリーンショット、または低解像度のビットマップを取得できるその他の機能など)。
  • グラフに数値データが表示され、クールな技術を学ぶ時間があれば、グラフ作成ライブラリを使用できます。この方法では、ベクトル描画になるため、よりきれいなレンダリングが得られます。例:ハイチャート
  • 最後で、さらに悪い解決策: 画像エディターと適切なスキルを使用して画像を操作し、線、点、矢印などのすべてのシャープな要素の厚さのサイズを大きくします...
于 2012-11-20T21:44:07.630 に答える