Les fichiers SVG/PNG s'ouvrent différemment dans le navigateur

Question

Je travaille sur un projet où notre base de données est au format svg. Maintenant, la chose étrange (je ne sais pas grand chose sur les formats d'image) est que l'image est totalement différente si je l'ouvre sur un programme informatique comme Image Viewer, ImageMagick ou Pinta, à quoi ressemble l'image quand je l'ouvre sur un navigateur (que ce soit Mozilla ou Chrome). Je joins une image (convertie de svg en png) pour plus de commodité et vous pouvez voir que la différence est vraiment grande si vous l'ouvrez sur un navigateur par rapport à un programme normal (si vous le téléchargez et l'ouvrez sur votre ordinateur).

Maintenant, je l'ai ouvert sur Python pour voir ce qui se passe, et apparemment l'image est sur le format RBGA. J'ai pensé à le convertir en RGB, et l'a fait en utilisant le code suivant:

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

et ensuite, des trucs bizarres sont arrivés. L'image semble être devenue complètement noire (ci-dessous) et en l'ouvrant sur Python, un programme local ou un navigateur ne fait plus aucune différence.

Quelqu'un a une idée de ce qui se passe? Je pense que je le perds et je suis complètement coincé.

Answer 1

En fait, SVG et PNG sont totalement différents. SVG (Graphiques vectoriels scallables) n'est pas un format d'image standard: l'image n'est pas stockée comme un raay de pixel (ou dérivé), mais comme un format vectorisé. Pour l'afficher, vous devez rendre les vecteurs en pixels, puis les afficher. Les grands atouts de cette approche sont la qualité par rapport à la taille: pour les illustrations, vous pouvez avoir une qualité fantastique pour presque rien en taille, cependant, il faut plus de temps pour traiter, et le décodage est très différent des autres formats d'image. n'est souvent pas supporté par les visionneuses d'images, et les rendus peuvent dépendre un peu du moteur de rendu.

PNG (Graphiques de réseau portable) d'autre part est toujours basé sur le pixel, et est très largement pris en charge. En ce qui concerne votre question, votre image possède un canal alpha (transparent). En le convertissant en RVB, vous vous débarrassez de cette transparence, que opencv traduit en une couleur fixe. Ici, cette couleur est (0,0,0), c'est-à-dire noire.

Vous devriez essayer ceci:

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