在HTML/CSS中顯示png圖像，如圖表

我已經制作了一堆圖表和表格，我已經以png格式保存爲演示文稿，作爲使用HTML/CSS/Javascript創建的基於Web的實驗中的激勵。如何讓他們在顯示時看起來清晰？在HTML/CSS中顯示png圖像，如圖表

下面是他們的樣子現在顯示在實驗中，當樣本：

sample

正如你所看到的，線條是鋸齒狀的，有時甚至細到消失，文本也有類似的問題。我想這是PNG圖像的「自然」尺寸（大約3500x2500像素）比顯示尺寸（大約200px高）大的結果，但我覺得應該有一些方法在顯示時解決此問題，而無需手動調整大小圖像。

以下是一些歷史記錄：這些都是在Excel中製作的，然後複製到Powerpoint，然後保存爲圖像。最初我直接從Powerpoint中保存，默認爲.jpg格式，並且模糊不清。然後我嘗試保存到.emf，並使用IrfanView重新保存爲.png。由此產生的png在通過任何圖像查看器以自然（大）尺寸查看時都非常尖銳，但是當我以更小的尺寸將它們嵌入html時，它們看起來非常糟糕，如上所示。

來源

2012-11-20 baixiwei

圖像的尺寸是多少（以像素爲單位）？ – sachleen

如果您希望圖像在調整大小時保持清晰，則應使用矢量圖形格式而不是位圖。 – Barmar

我只是將pix尺寸添加到我的問題中。我會研究矢量圖形格式 - 不知道它是什麼，但我確信我可以找到它 - 謝謝！ – baixiwei

屏幕上的線條很難用少於1個像素的厚度顯示。

因此，假設您的圖像上有3個像素厚的元素。調整大小爲250 X 250後，它們的厚度將爲0.3像素 - >不太好。

這是什麼造成了你在線邊緣和角落描述的不良效果。

爲了解決這個問題，我看到三個可能的解決方案：

使圖像的其他副本從原始來源較低的分辨率（如Excel圖表，或者讓你的任何其他功能的屏幕截圖得到一個低分辨率的位圖）
如果你有圖表上顯示的數字數據和時間來學習一個很酷的技術，你可以使用圖表庫。這樣你會得到更漂亮的渲染，因爲它會是矢量圖。例如：HighCharts
最後和差遠瞭解決方案：在帶有圖像編輯的圖像，並適當技能的工作，以增加所有尖銳元件的厚度尺寸，如線，點，箭頭，等...

來源

2012-11-20 21:44:07

你還有excel文件嗎？如果是這樣你可以：

導出您的圖表作爲pdf文件在Excel中;
然後將pdf導入到Inkscape等矢量程序中;
另存爲svg然後引用svg文件，比如你會用圖像標籤做的（你也可以直接嵌入）

當，因爲他們將是矢量圖形，所以你可以編輯一些點PDF導入如果需要的話。

來源

2012-11-20 22:12:29 user1840211

在HTML/CSS中顯示png圖像，如圖表

回答

相關問題