Bagaimana untuk Menukar Peta SVG AS kepada JPG untuk Keserasian Merentas Pelayar?

Menukar SVG kepada JPG untuk Peta AS Serasi Cross-Pelayar

Bayangkan bekerja pada projek web yang menampilkan peta dinamik Amerika Syarikat dengan warna yang mewakili data. Fail SVG ini menawarkan titik permulaan yang hebat, tetapi pelayar IE kekurangan sokongan SVG. Untuk menangani perkara ini, kami boleh memanfaatkan sama ada PHP/GD2 atau PHP/ImageMagick untuk menukar peta SVG kepada format JPG.

Menggunakan Perpustakaan Imagick

1. Import perpustakaan Imagick dan muatkan kandungan fail SVG ke dalam $svg pembolehubah.
2. Tentukan tatasusunan ($idColorArray) memetakan singkatan keadaan kepada nilai warna heks.
3. Gunakan gelung untuk menggunakan warna keadaan dengan menggantikan nilai isian asal dengan nilai hex yang dikehendaki menggunakan ungkapan biasa.
4. Buat objek Imagick, baca kandungan SVG yang diubah suai ke dalamnya dan nyatakan yang dikehendaki saiz imej output.
5. Konfigurasikan format imej (cth., "png24" untuk PNG, "jpeg" untuk JPG) dan laraskan saiz imej mengikut keperluan.
6. Tulis imej yang terhasil pada failkan atau keluarkannya sebagai rentetan base64 untuk paparan sebaris.

Tambahan Pertimbangan

• Anda boleh menggunakan CSS untuk menentukan peraturan gaya bagi keadaan individu, yang memudahkan proses pengubahsuaian warna.
• Jika penciptaan fail dan sokongan penyemak imbas luas tidak diperlukan, anda boleh mempertimbangkan untuk memanipulasi SVG secara langsung menggunakan jQuery.

Contoh

Coretan kod berikut menukar peta SVG kepada format PNG menggunakan Imagic:

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

// State color array
$idColorArray = array(
     "AL" => "339966",
    ,"AK" => "0099FF",
    ...
    ,"WI" => "FF4B00",
    ,"WY" => "A3609B"
);

// Update SVG with state colors
foreach($idColorArray as $state => $color){
    $svg = preg_replace(
         '/id="'.$state.'">

Atas ialah kandungan terperinci Bagaimana untuk Menukar Peta SVG AS kepada JPG untuk Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!