it-swarm.com.de

Konvertieren Sie das SVG-Bild mit PNG in PNG PHP

Ich arbeite an einem Webprojekt, das eine dynamisch generierte Karte der USA umfasst, die verschiedene Zustände basierend auf einer Reihe von Daten einfärbt. 

Diese SVG -Datei gibt mir eine gute leere Karte der USA und kann sehr einfach die Farbe jedes Bundesstaates ändern. Die Schwierigkeit ist, dass IE Browser SVG nicht unterstützen. Damit ich die praktische Syntax von svg verwenden kann, muss ich sie in eine JPG-Datei konvertieren. 

Im Idealfall möchte ich dies nur mit der Gd2-Bibliothek tun, könnte aber auch ImageMagick verwenden. Ich habe absolut keine Ahnung, wie ich das machen soll. 

Jede Lösung, die es mir ermöglicht, die Farben von Staaten auf einer Karte der USA dynamisch zu ändern, wird in Betracht gezogen. Der Schlüssel ist, dass es einfach ist, die Farben im laufenden Betrieb zu ändern, und dass es sich um einen Browser handelt. Bitte nur PHP/Apache-Lösungen.

98

Es ist komisch, dass Sie das gefragt haben. Ich habe das kürzlich für meine Website gemacht und dachte, ich sollte ein Tutorial schreiben ... Hier ist, wie man das mit PHP/Imagick macht, das ImageMagick verwendet:

$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);

/*loop to color each state as needed, something like*/ 
$idColorArray = array(
     "AL" => "339966"
    ,"AK" => "0099FF"
    ...
    ,"WI" => "FF4B00"
    ,"WY" => "A3609B"
);

foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
    $svg = preg_replace(
         '/id="'.$state.'" style="fill:#([0-9a-f]{6})/'
        , 'id="'.$state.'" style="fill:#'.$color
        , $svg
    );
}

$im->readImageBlob($svg);

/*png settings*/
$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1);  /*Optional, if you need to resize*/

/*jpeg*/
$im->setImageFormat("jpeg");
$im->adaptiveResizeImage(720, 445); /*Optional, if you need to resize*/

$im->writeImage('/path/to/colored/us-map.png');/*(or .jpg)*/
$im->clear();
$im->destroy();

die Schritte zum Auswechseln der regulären Ausdrücke können sich je nach dem xg-Pfad des svg-Pfads und der Art und Weise unterscheiden, in der ID- und Farbwerte gespeichert werden. Wenn Sie keine Datei auf dem Server speichern möchten, können Sie das Image als Basis 64 ausgeben

<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '"  />';?>

(bevor Sie clear/destroy verwenden), hat aber zB Probleme mit PNG als base64, so dass Sie base64 wahrscheinlich als jpeg ausgeben müssen

sie können hier ein Beispiel sehen, das ich für eine Verkaufsgebietskarte eines ehemaligen Arbeitgebers erstellt habe:

Start: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg

Fertig: enter image description here

Bearbeiten

Seit dem Schreiben des obigen habe ich zwei verbesserte Techniken entwickelt:

1) Anstelle einer Regex-Schleife, um den Füllstatus zu ändern, verwenden Sie CSS, um Stilregeln zu erstellen 

<style type="text/css">
#CA,#FL,HI{
    fill:blue;
}
#Al, #NY, #NM{
    fill:#cc6699;
}
/*etc..*/
</style>

und dann können Sie einen einzelnen Text ersetzen, um Ihre CSS-Regeln in die SVG-Datei einzufügen, bevor Sie mit der Image-Erstellung von JPEG/PNG fortfahren. Wenn sich die Farben nicht ändern, stellen Sie sicher, dass in Ihren Pfad-Tags keine Inline-Füllstile vorhanden sind, die das CSS überschreiben.

2) Wenn Sie keine jpeg/png-Image-Datei erstellen müssen (und keine veralteten Browser unterstützen müssen), können Sie die svg-Datei direkt mit jQuery bearbeiten. Sie können nicht auf die svg-Pfade zugreifen, wenn Sie svg mit img- oder object-Tags einbetten. Daher müssen Sie die svg-xml-Datei direkt in Ihre Webseiten-HTML-Datei einfügen:

<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>

dann ist das Wechseln der Farben so einfach wie:

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
    $('#CA').css('fill', 'blue');
    $('#NY').css('fill', '#ff0000');
</script>
128
WebChemist

Eine weitere sehr schnelle und genaue Option ist der Browser PhantomJS (Webkit).

http://phantomjs.org/

17
atomicjeep

Sie erwähnen, dass Sie dies tun, weil IE SVG nicht unterstützt.

Die gute Nachricht ist, dass IE do Vektorgrafiken unterstützt. Okay, es ist in der Form einer Sprache namens VML, die nur IE unterstützt, und nicht SVG, aber sie ist vorhanden und Sie können sie verwenden.

Google Maps erkennt unter anderem die Browserfunktionen, um zu bestimmen, ob SVG oder VML verwendet werden soll.

Dann gibt es noch die Raphael Library , eine Javascript-Browser-basierte Grafikbibliothek, die je nach Browser entweder SVG oder VML unterstützt.

Eine andere, die helfen kann: SVGWeb .

All dies bedeutet, dass Sie Ihre IE - Benutzer unterstützen können, ohne auf Bitmap-Grafiken zurückgreifen zu müssen.

Siehe auch die oberste Antwort auf diese Frage, zum Beispiel: XSL SVG in VML umwandeln

11
Spudley

Vergessen Sie beim Konvertieren von SVG in transparentes PNG nicht, BEFORE $ imagick-> readImageBlob () anzugeben:

$imagick->setBackgroundColor(new ImagickPixel('transparent'));
8
psycho brm

Dies ist sehr einfach, ich habe in den letzten Wochen daran gearbeitet. 

Sie benötigen das Batik SVG Toolkit . Download und legt die Dateien in demselben Verzeichnis ab wie die SVG-Datei, die Sie in ein JPEG-Format konvertieren möchten, und stellen Sie sicher, dass Sie sie zuerst entpacken.

Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus:

Java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 NAME_OF_SVG_FILE.svg

Das sollte ein JPEG der SVG-Datei ausgeben. Wirklich einfach. Sie können es sogar einfach in einer Schleife platzieren und Lasten von SVGs konvertieren, 

import os

svgs = ('test1.svg', 'test2.svg', 'etc.svg') 
for svg in svgs:
    os.system('Java -jar batik-rasterizer.jar -m image/jpeg -q 0.8 '+str(svg)+'.svg')
6
user179169

sie können die canvg js-Bibliothek verwenden, um das SVG in PNG zu konvertieren. Weitere Informationen finden Sie hier http://paksula.users.cs.helsinki.fi/svg_open_2010/demo.xhtml kompatibel mit allen gängigen Browsern!

Ich verwende es in meinem Projekt und konvertiert das SVG tatsächlich in PNG (mit Hilfe von PHP, um die Datei natürlich zu speichern).

3
razor7

Ich kenne keine eigenständige PHP/Apache-Lösung, da hierfür eine PHP -Bibliothek erforderlich ist, die SVG-Bilder lesen und rendern kann. Ich bin nicht sicher, ob eine solche Bibliothek existiert - ich kenne keine.

ImageMagick kann SVG-Dateien entweder über die Befehlszeile oder die PHP - Bindung IMagick rastern, scheint jedoch eine Reihe von Eigenheiten und externen Abhängigkeiten zu haben (z. in diesem Forumsthread . Ich denke, es ist immer noch der vielversprechendste Weg, den ich als erstes untersuchen würde, wenn ich du wäre. 

2
Pekka 웃

Dies ist eine Methode zum Konvertieren eines SVG-Bildes in eine GIF-Datei mit Standard-PHP-Gd-Werkzeugen

1) Sie fügen das Bild in einem Canvas-Element im Browser ein:

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

Konvertieren Sie es dann auf dem Server (ProcessPicture.php) von (Standard) png in gif und speichern Sie es. (Sie könnten auch als PNG gespeichert haben und dann ImagePng anstelle von Image-GIF verwenden):

//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);
0
oleviolin