1

我制作了一堆图表和表格，并以 png 格式保存，以便在使用 HTML / CSS / Javascript 创建的基于 Web 的实验中作为刺激呈现。我怎样才能让它们在显示时看起来很清晰？

以下是它们现在在实验中显示时的样子：

样本

如您所见，线条参差不齐，有时甚至细到消失，文本也有类似的问题。我猜这是因为 png 图像的“自然”尺寸（大约 3500x2500 像素）大于它们的显示尺寸（大约 200 像素高），但我觉得应该有一些方法可以在显示时解决这个问题，而无需手动调整所有尺寸图像。

这是一些历史：这些都是在 Excel 中制作的，然后复制到 Powerpoint 并保存为图像。本来我是直接从Powerpoint中保存的，默认是.jpg格式，出来的时候很模糊。然后我尝试保存到 .emf 并使用 IrfanView 重新保存为 .png。当通过任何图像查看器以自然（大）尺寸查看时，生成的 png 非常清晰，但是当我以更小的尺寸将它们嵌入到 html 中时，它们看起来非常糟糕，如上所示。

4

2 回答 2

1

excel文件还有吗？如果是这样，您可以：

  1. 将图表导出为 Excel 中的 pdf 文件；
  2. 然后将pdf导入到矢量程序中，例如Inkscape；
  3. 另存为svg，然后svg像使用图像标签一样引用文件（也可以直接嵌入）

当以 pdf 格式导入时，它们将是矢量图形，因此您可以根据需要进一步编辑一些点。

于 2012-11-20T22:12:29.430 回答
0

屏幕上的线条在小于 1 个像素的厚度下很难看起来很好。

因此，假设您的图像上有 3 个像素厚的元素。调整到 250 X 250 后，它们将是 0.3 像素厚 -> 不好。

那是什么造成了您在线条边缘和角落描述的不良影响。

为了解决这个问题，我看到了三个潜在的解决方案：

  • 从原始来源制作具有较低分辨率的图像的其他副本（如 Excel 图表的屏幕截图，或任何其他允许您获得低分辨率位图的功能）
  • 如果您有图表上显示的数字数据并且有时间学习一项很酷的技术，您可以使用图表库。这样你会得到更漂亮的渲染，因为它是矢量图。示例：HighCharts
  • 最后也是更糟糕的解决方案：使用图像编辑器和适当的技能处理图像，以增加所有尖锐元素（如线条、点、箭头等）的粗细大小……
于 2012-11-20T21:44:07.630 回答