Generowanie obrazu SVG przy użyciu svg danych surowych w imagick php

Question

Próbuję utworzyć obraz svg przy użyciu svg surowych danych, które otrzymuję z js tkaniny. Użyłem poniższego kodu do wygenerowania svg przy użyciu surowych danych svg, ale nie działa on poprawnie.

public function generate_svg($raw_svg='',$prefix='',$folder_name='card_image') 
{ 
    $file_name = '';  
    if($raw_svg!='') 
    { 
     try{   
      $file_name = uniqid($prefix).".svg"; 
      $image = new \Imagick(); 
      $image->readImageBlob($raw_svg); 
      $image->setImageFormat("svg"); 
      $image->writeImage($folder_name.$file_name); 
     } catch (ImagickException $ex) { 
      echo $ex->getMessage(); 
     } 
    } 
    return $file_name; 
} 

Teraz problem jest tło obrazu jest rodzajem Spójrz jak poniżej:

Więc co należy zrobić, aby to naprawić?

powinien wyglądać jak poniżej (zignorować kwadratowe i okrągłe), problem jest cały czarny tło wygląda zamiast bg obrazu .:

Więc problem jest obraz tła nie jest ładowanie, więc czy muszę dodać dodatkową bibliotekę, aby to zrobić, czy cokolwiek innego?

Imagick wersja: 6.7.7

convert -list delegate | grep svg 

    cdr =>   "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o" 
    cgm =>   "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o" 
    dot =>   "dot' -Tsvg '%i' -o '%o" 
    dxf =>   "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o" 
    fig =>   "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o" 
    svg =>   "rsvg-convert' -o '%o' '%i" 

convert -list format | grep SVG 

MSVG rw+ ImageMagick's own SVG internal renderer 
    SVG rw+ Scalable Vector Graphics (XML 2.9.1) 
SVGZ rw+ Compressed Scalable Vector Graphics (XML 2.9.1) 

Answer 1

myślę, że jesteś na niewłaściwym torze. Magia obrazu jest w zasadzie biblioteką zorientowaną na piksel. Podczas renderowania obrazu tła może to być kwestia konfiguracji, twoje zdjęcie pokazuje, że "osadzanie" czcionek, które chcesz osiągnąć, nie ma miejsca. I tam jest prawdziwy problem.

Co chcesz osiągnąć, reprezentuje informacje o czcionce w pliku SVG. Istnieją dwa sposoby, aby to zrobić, i dla obu nie ma absolutnie żadnego wsparcia w IM:

• konwersji czcionek do formatu czcionek SVG i osadzenie go inline w pliku (produkuje duże pliki)
• konwersji wszystkich glify na ścieżki (teksty nie są już edytowalne)

Z twojego opisu Myślę, że powinieneś dążyć do drugiego wariantu. Zasadniczo wymienisz elementy <text> w łańcuchu z elementami <path> i w inny sposób zapiszesz plik SVG zawierający dane osadzonego obrazu w momencie jego otrzymania.

How to convert text to SVG paths? to starsze spojrzenie na ten problem.

EasySVG for PHP to biblioteka, która powstała z tego pytania dla konwersji glifów na ścieżki, ale pod warunkiem, że czcionka jest już w formacie SVG. W typowych formatach czcionek, takich jak ttf, możesz najpierw przyjrzeć się narzędziom do konwersji czcionek, takim jak FontForge.

Możesz uzyskać bezpośrednią transformację danych SVG za pomocą Cairo, ale to tylko przeczucie, nie pracowałem z tym.

Wreszcie, jako obejście problemu, można przekazać całe zadanie do Inkscape. Może być wywołana w linii poleceń bez uruchamiania GUI jak

inkscape in.svg --export-text-to-path --export-plain-svg=out.svg 

Answer 2

oprócz użytkownika @ ccprog fantastyczną odpowiedź Chciałbym wspomnieć można wygenerować piksele chcesz użyciu phantomjs, tylko karmić phantomjs z twój wejściowy plik html i wynik jako png.

Answer 3

Skończyło się na przechowywaniu czcionek w surowym svg, a po tym utworzonym pliku svg za pomocą fopen zamiast za pomocą imagicka.

Więc moja SVG jest wyglądać jak poniżej:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" xml:space="preserve"> 
<desc>Created with Fabric.js 2.0.0-beta7</desc> 
<defs> 
<style> 
    //... base64 data of font 
    @font-face { 
     font-family: "Elsie"; 
     src: url("data:application/font-truetype;charset=utf-8;base64,...") 
    } 
</style> 
</defs> 

Potem stworzyliśmy plik SVG za pomocą poniższego:

$file_name = uniqid($prefix).".svg"; 
$file_handle = fopen("$folder_name/".$file_name, 'w'); 
fwrite($file_handle, $raw_svg); 
fclose($file_handle);