SVG/PNG 文件在浏览器中的打开方式不同

Question

我正在做一个项目，我们的数据库是 svg 格式。现在，奇怪的事情（我对图像格式了解不多）是，如果我在 Image Viewer、ImageMagick 或 Pinta 等计算机程序上打开它，图像看起来完全不同，当我打开它时图像看起来如何浏览器（Mozilla 或 Chrome）。为方便起见，我附上了一张图片（从 svg 转换为 png），您可以看到，如果您在浏览器上打开它与普通程序（如果您下载并在计算机上打开它）相比，差异真的很大。

现在，我在 Python 上打开它以查看发生了什么，显然图像是 RBGA 格式。我想将其转换为 RGB，并使用以下代码：

img = Image.open(os.path.join(PNG_REPO, page)[:-4] + ".png")
arr = np.array(img)
rgbImage = cv2.cvtColor(arr, cv2.COLOR_RGBA2RGB)
img = Image.fromarray(rgbImage)
img.save("please.png")

然后，奇怪的事情发生了。图像似乎已经完全变黑了（附在下面），在 Python、本地程序或浏览器上打开它已经没有任何区别了。

有人知道发生了什么吗？我认为我正在失去它，我完全被卡住了。

Answer 1

事实上，SVG 和 PNG 是完全不同的。

SVG（可缩放矢量图形）不是标准图像格式：图像不存储为像素（或导数），而是矢量化格式。要显示它，您必须将矢量渲染为像素，然后显示它们。这种方法的最大优势是质量与尺寸：对于插图，您可以在几乎没有尺寸的情况下获得出色的质量，但是，它需要更多的时间来处理，并且解码与其他图像格式非常不同，因此它图像查看器通常不支持，并且渲染可能在一定程度上取决于渲染器。

另一方面，PNG（便携式网络图形）仍然基于像素，并且得到了非常广泛的支持。

至于您的问题，您的图像具有 alpha（透明度）通道。将其转换为 RGB 时，您将摆脱这种透明度，opencv 将其转换为固定颜色。这里，这个颜色是(0,0,0)，也就是黑色。

你应该试试这个：

img = Image.open(os.path.join(PNG_REPO, page)[:-4] + ".png")
img.load()
new_img = Image.new("RGB", img.size, (255, 255, 255))
new_img.paste(img, mask=img.split()[3]) # 3 is the alpha channel
new_img.save("should_be_good.png")