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")

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

SVG/PNG files open differently in the browser

python

svg

png

image