Convertir une image SVG en PNG avec PHP

Question

Je travaille sur un projet web qui implique une carte des Etats-Unis générée dynamiquement et colorant différents états en fonction d'un ensemble de données.

Ce fichier SVG me donne une bonne carte vierge des Etats-Unis et il est très facile de changer la couleur de chaque état. La difficulté réside dans le fait que les navigateurs IE ne supportent pas le SVG. Pour pouvoir utiliser la syntaxe pratique du svg, je dois le convertir en JPG.

Idéalement, j'aimerais faire cela avec la seule bibliothèque GD2, mais je pourrais aussi utiliser ImageMagick. Je n'ai absolument aucune idée de la façon de procéder.

Toute solution qui me permettrait de modifier dynamiquement les couleurs des États sur une carte des États-Unis sera prise en considération. L'essentiel est qu'il soit facile de changer les couleurs à la volée et qu'il soit compatible avec tous les navigateurs. Les solutions PHP/Apache uniquement, s'il vous plaît.

Answer 1

Il s'agit d'une méthode permettant de convertir une image svg en gif à l'aide des outils php GD standard.

1) Vous placez l'image dans un élément canevas dans le navigateur :

<canvas id=myCanvas></canvas>

<script>
var Key='picturename'
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
base_image = new Image();
base_image.src = myimage.svg;
base_image.onload = function(){

    //get the image info as base64 text string

    var dataURL = canvas.toDataURL();
    //Post the image (dataURL) to the server using jQuery post method
    $.post('ProcessPicture.php',{'TheKey':Key,'image': dataURL ,'h': canvas.height,'w':canvas.width,"stemme":stemme } ,function(data,status){ alert(data+' '+status) });
}
</script>    

Et ensuite la convertir sur le serveur (ProcessPicture.php) de png (par défaut) en gif et l'enregistrer. (vous auriez pu aussi l'enregistrer en png puis utiliser imagepng au lieu d'image gif) :

//receive the posted data in php
$pic=$_POST['image'];
$Key=$_POST['TheKey'];
$height=$_POST['h'];
$width=$_POST['w'];
$dir='../gif/'
$gifName=$dir.$Key.'.gif';
 $pngName=$dir.$Key.'.png';

//split the generated base64 string before the comma. to remove the 'data:image/png;base64, header  created by and get the image data
$data = explode(',', $pic);
$base64img = base64_decode($data[1]);
$dimg=imagecreatefromstring($base64img); 

//in order to avoid copying a black figure into a (default) black background you must create a white background

$im_out = ImageCreateTrueColor($width,$height);
$bgfill = imagecolorallocate( $im_out, 255, 255, 255 );
imagefill( $im_out, 0,0, $bgfill );

//Copy the uploaded picture in on the white background
ImageCopyResampled($im_out, $dimg ,0, 0, 0, 0, $width, $height,$width, $height);

//Make the gif and png file 
imagegif($im_out, $gifName);
imagepng($im_out, $pngName);

Answer 2

Vous pouvez utiliser la bibliothèque js canvg pour convertir le SVG en PNG, plus d'info ici http://paksula.users.cs.helsinki.fi/svg_open_2010/demo.xhtml compatible avec tous les principaux navigateurs !

Je l'utilise dans mon projet et convertit les SVG en PNG (avec l'aide de PHP pour sauvegarder le fichier bien sûr).

Answer 3

Je ne connais pas de solution autonome pour PHP / Apache, car cela nécessiterait une bibliothèque PHP capable de lire et de rendre les images SVG. Je ne suis pas sûr qu'une telle bibliothèque existe - je n'en connais pas.

ImageMagick est capable de rastériser des fichiers SVG, soit par la ligne de commande, soit par la liaison PHP, IMagick mais semble présenter un certain nombre de bizarreries et de dépendances externes, comme le montre par exemple le document suivant ce fil du forum . Je pense que c'est toujours la voie la plus prometteuse, c'est la première chose que j'examinerais si j'étais vous.

Answer 4

Vous pouvez utiliser Bibliothèque Raphaël-JavaScript et le réaliser facilement. Il fonctionnera également dans IE.

Answer 5

$command = 'convert -density 300 ';
                        if(Input::Post('height')!='' && Input::Post('width')!=''){
                            $command.='-resize '.Input::Post('width').'x'.Input::Post('height').' ';
                        }
                        $command.=$svg.' '.$source;
                        exec($command);
                        @unlink($svg);

ou en utilisant : potrace démo : Tool4dev.com