2017-11-22 178 views
5

Ben svg ham verileri kullanarak ben js alıyorum kullanarak svg görüntü oluşturmaya çalışıyorum. Svg ham verileri kullanarak svg oluşturmak için aşağıdaki kodu kullandım ancak düzgün çalışmıyor.Imag svg ham verileri kullanarak SVG Görüntü oluşturma IMG

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

Şimdi mesele arka plan görüntüsü tür aşağıda gibisin olmasıdır:

enter image description here

Yani ben bunu düzeltmek için ne yapmalıyız?

Aşağıda gibi görünmelidir

(yuvarlak kare ve görmezden), konu, tüm arka plan yerine bg görüntüsü .:

enter image description here

Yani mesele arka plan resmi yüklenmiyor olduğu siyah benzemesidir Bu yüzden veya başka bir şey yapmak için ek kütüphane eklemek zorunda mıyım?

IMagic Versiyon: 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) 
+0

nasıl bakmak gerekiyordu

Yani benim svg nasıl görüneceğini aşağıda mı? Görüntüyü vermedin. –

+0

@MarkSetchell Soruyu güncelledi. – DS9

+0

@MarkSetchell işlenmemiş veri: https://codepen.io/dhavalsisodiya/pen/XewGey – DS9

cevap

1

Sana yanlış yolda olduğunu düşünüyorum. Görüntü Magick temelde piksel tabanlı bir kütüphanedir. Arka plan resmini oluştururken bir yapılandırma sorunu olabilirken, resminiz elde etmek istediğiniz "gömme" yazı tipinin gerçekleşmediğini gösterir. Ve asıl sorun var.

Neyi başarmak istediğiniz SVG dosyasının içindeki yazı tipi bilgilerini temsil etmektir. İki bunu yolları ve için de kesinlikle IM desteği olmadığını vardır:

  • SVG yazı formatına yazı dönüştürme ve dosyadaki satır içine gömerek tüm dönüştürme
  • (büyük dosyaları üretir) yollara glifler (metinler artık düzenlenebilir değildir)

Sizin açınızdan ikinci varyantı hedeflemelisiniz. Temel olarak <path> öğeleriyle dizinizde <text> öğelerini değiştirirsiniz ve aksi halde, aldığınız gömülü görüntü verilerini içeren SVG dosyasını yazabilirsiniz.

How to convert text to SVG paths?, bu soruna daha eski bir bakış.

EasySVG for PHP, gliften yola dönüştürme için bu sorgunun sonucu olan bir kitaplıktır, ancak yalnızca SVG biçiminde zaten yazı tipine sahip olmanız şartıyla sağlanır. Ttf gibi tipik masaüstü yazı tipi biçimleri için, önce FontForge gibi yazı tipi dönüştürme araçlarına bakmanız gerekebilir.

Cairo aracılığıyla çalışan bir doğrudan svg veri dönüşümü alabilirsiniz, ancak bu yalnızca bir öbek değil, onunla çalışmadım. Son olarak, bir geçici çözüm olarak tüm görevi Inkscape'e atayabilirsiniz. Sadece ile phantomjs beslemek, size phantomjs kullanarak istediğiniz pikselleri üretebilir bahsetmek istiyorum @ ccprog fantastik cevap ilaveten

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

teşekkürler. – DS9

0

olarak GUI başlatmadan komut satırında çağrılabilir giriş html dosyası ve çıktı olarak png.

1

Ham svg'de fontları depolayarak sona erdi ve bundan sonra imagick yerine fopen kullanarak svg dosyası oluşturdum.

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

o ben aşağıda kullanarak svg dosyası oluşturduktan sonra::

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

Bu şekilde aldığınız dosya boyutlarını merak ediyorum. Base64-kodlaması ttf'nin boyutunu azaltır mı? – ccprog

+0

@ccprog base64 kodlaması dosya boyutunu artırır. Ancak bu yöntemi kullanarak tüm fontlar nihai svg görüntüsüne yükleniyor. – DS9