পিএইচপি দিয়ে এসএনজি চিত্রকে পিএনজিতে রূপান্তর করুন


111

আমি এমন একটি ওয়েব প্রকল্পে কাজ করছি যেটিতে মার্কিন যুক্তরাষ্ট্রে একটি গতিশীলভাবে উত্পন্ন মানচিত্র জড়িত রয়েছে যা বিভিন্ন উপাত্তের সেটের ভিত্তিতে বিভিন্ন রাজ্যে রঙ করে।

এই এসভিজি ফাইলটি আমাকে মার্কিন যুক্তরাষ্ট্রে একটি ভাল ফাঁকা মানচিত্র দেয় এবং প্রতিটি রাজ্যের রঙ পরিবর্তন করা খুব সহজ। অসুবিধাটি হ'ল আইই ব্রাউজারগুলি এসভিজি সমর্থন করে না তাই এসভিজি প্রস্তাবিত হ্যান্ডি সিনট্যাক্সটি ব্যবহার করার জন্য আমাকে এটিকে জেপিজিতে রূপান্তর করতে হবে।

আদর্শভাবে, আমি এটি কেবল জিডি 2 লাইব্রেরি দিয়ে করতে চাই তবে চিত্রম্যাগিকও ব্যবহার করতে পারি। এটি কীভাবে করা যায় তা সম্পর্কে আমার কোনও ধারণা নেই।

যে কোনও সমাধান যা আমাকে আমেরিকার মানচিত্রে রাজ্যের রঙ পরিবর্তনশীল করতে দেয় তা বিবেচনা করা হবে। মূলটি হ'ল উড়তে রঙগুলি পরিবর্তন করা সহজ এবং এটি ক্রস ব্রাউজার। দয়া করে শুধুমাত্র পিএইচপি / অ্যাপাচি সমাধান করুন।


ভিভিএমএলে এসভিজি বন্দর করার জন্য কি কোনও ক্লাস রয়েছে? এইভাবে আপনার এখনও একটি 'এইচটিএমএল 5' টাইপ সমাধান থাকতে পারে
প্যাট্রিক

আমার উত্তর একবার দেখুন। ঠিক আপনার যা প্রয়োজন

উত্তর:


142

মজার বিষয় আপনি এটি জিজ্ঞাসা করেছেন, আমি সম্প্রতি আমার কাজের সাইটের জন্য এটি করেছি এবং আমি ভাবছিলাম যে আমার একটি টিউটোরিয়াল লিখতে হবে ... এখানে পিএইচপি / ইমেজিক, যা ইমেজম্যাগিক ব্যবহার করে এটি কীভাবে করবেন:

$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();

এসভিজি পাথ এক্সএমএল এবং কীভাবে আপনার আইডি ও রঙের মান সংরক্ষণ করা হয় তার উপর নির্ভর করে পদক্ষেপগুলি রেজেক্স রঙ প্রতিস্থাপনের ক্ষেত্রে আলাদা হতে পারে। আপনি যদি সার্ভারে কোনও ফাইল সঞ্চয় করতে না চান, আপনি ছবিটি বেস 64 এর মতো আউটপুট করতে পারেন

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

(আপনি পরিষ্কার / ধ্বংস করার আগে) তবে পিএনজির সাথে বেস 64 হিসাবে সমস্যা রয়েছে যাতে আপনার সম্ভবত বেস 64 কে জেপিগ হিসাবে আউটপুট দিতে হবে

আপনি এখানে একটি পূর্ববর্তী নিয়োগকর্তার বিক্রয় অঞ্চল মানচিত্রের জন্য একটি উদাহরণ দেখতে পাচ্ছেন:

শুরু: https://upload.wikimedia.org/wikedia/commons/1/1a/Blank_US_Map_(states_only).svg

শেষ: এখানে চিত্র বর্ণনা লিখুন

সম্পাদন করা

উপরের লেখার পরে, আমি 2 উন্নত কৌশল নিয়ে এসেছি:

1) পূরণের স্থিতি পরিবর্তন করতে একটি রেইগেক্স লুপের পরিবর্তে, স্টাইলের নিয়মগুলি পছন্দ করতে CSS ব্যবহার করুন

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

এবং তারপরে আপনি ইমেজিক জেপেইগ / পিএনজি তৈরির প্রক্রিয়াটি চালিয়ে যাওয়ার আগে আপনার সিএসএস বিধিগুলিকে এসজিজে ইনজেক্ট করার জন্য একটি পাঠ্য প্রতিস্থাপন করতে পারেন। যদি রঙগুলি পরিবর্তন না হয় তবে সিএসএস ওভাররাইড করে আপনার পাথ ট্যাগগুলিতে আপনার কোনও ইনলাইন ফিল শৈলগুলি নেই তা নিশ্চিত করে দেখুন check

2) যদি আপনাকে আসলে কোনও জেপিগ / পিএনজি চিত্র ফাইল তৈরি করতে না হয় (এবং পুরানো ব্রাউজারগুলিকে সমর্থন করার প্রয়োজন না হয়), আপনি সরাসরি জাভিউয়ের সাহায্যে এসভিজি হেরফের করতে পারেন। ইমগ বা অবজেক্ট ট্যাগ ব্যবহার করে এসভিজি এম্বেড করার সময় আপনি এসজিজি পাথগুলি অ্যাক্সেস করতে পারবেন না, সুতরাং আপনাকে সরাসরি নিজের ওয়েবপৃষ্ঠায় এইচটিএমএল তে এসভিজি এক্সএমএল অন্তর্ভুক্ত করতে হবে:

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

তারপরে রং পরিবর্তন করা যেমন সহজ:

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

1
এটি কীভাবে করা যায় তার জন্য খুব সঠিক এবং দরকারী টিউটোরিয়ালটির জন্য ধন্যবাদ। আমি অবশ্যই আপনার সমাধানটি ব্যাকআপ হিসাবে ব্যবহার করব তবে চেষ্টা করতে আগ্রহী এবং কেবলমাত্র সমস্ত বড় ব্রাউজারেই এসভিজি সামঞ্জস্যতা পেতে পারি।
মাইকেল বার্কোপাবাস

1
এসভিজি উইকিপিডিয়া পৃষ্ঠা থেকে এসভিজি ভিউয়ার প্লাগইন ইনস্টল করার জন্য ব্যবহারকারীকে প্রয়োজনীয়তা ছাড়াই ie8 বা নিম্নে সমর্থিত নয়: "সমস্ত প্রধান আধুনিক ওয়েব ব্রাউজারগুলি মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার (আইই) এর খুব উল্লেখযোগ্য ব্যতিক্রমের সাথে সরাসরি এসভিজি মার্কআপকে সমর্থন এবং রেন্ডার করে [ 3] ইন্টারনেট এক্সপ্লোরার 9 বিটা বেসিক এসভিজি বৈশিষ্ট্য সেটটিকে সমর্থন করে [[4] বর্তমানে, অ্যান্ড্রয়েডের অধীনে চলমান ব্রাউজারগুলির সমর্থনও সীমিত ""
ওয়েবচেমিস্ট 26'11

1
হ্যাঁ, তবে এসভিজিওয়েব কিছুটা জেএস এবং ফ্ল্যাশ ব্যবহার করে সমস্ত অসুবিধাগুলি লোপ পেয়েছে বলে মনে হচ্ছে। আমি যে সমাধানটি দিয়েছিলাম সেটাই।
মাইকেল বার্কম্পাস

2
আমি আপনার পরিষ্কার এবং দ্রুত সমাধান পছন্দ করি। এক্সএমএল ফাইলগুলির সাথে ব্যক্তিগতভাবে আলাপ করার সময় আমি রেজেজের চেয়ে নিরাপদ বোধ করার জন্য ডোম পার্সার ব্যবহার করতে পছন্দ করি। ষষ্ঠ লাইক:$dom = new DOMDocument(); $dom->loadXML( $svg ); $dom->getElementsByTagName('image')->item(0)->setAttribute('id', $state); $svg = $dom->saveXML();
ট্যাপার

এক্সএলএমএল পার্সার হ'ল নিরাপদ, কিছুটা ধীরগতির হলেও অন্য যে কোনও এসজিগির সাথে সমাধান ... এক্ষেত্রে রেজেনেক্স নিরাপদ কারণ আমি নিশ্চিত করেছিলাম যে প্রতিটি রাজ্যের বৈশিষ্ট্যগুলি হুবহু বিন্যাসিত হয়েছিল (আইডি = "এক্সএক্স" স্টাইল = "ফিল: # XXXXXX ")।
ওয়েবচেমিস্ট

11

আপনি উল্লেখ করেছেন যে আপনি এটি করছেন কারণ IE এসভিজি সমর্থন করে না।

সুসংবাদটি হ'ল আইই ভেক্টর গ্রাফিক্স সমর্থন করে । ঠিক আছে, সুতরাং এটি ভিএমএল নামে একটি ভাষার আকারে যা এসভিজির চেয়ে কেবল আইই সমর্থন করে তবে এটি সেখানে রয়েছে এবং আপনি এটি ব্যবহার করতে পারেন।

গুগল ম্যাপস, অন্যদের মধ্যেও, এসভিজি বা ভিএমএল সরবরাহ করবে কিনা তা নির্ধারণ করতে ব্রাউজারের ক্ষমতাগুলি সনাক্ত করবে।

তারপরে রয়েছে রাফেল গ্রন্থাগার , যা জাভাস্ক্রিপ্ট ব্রাউজার ভিত্তিক গ্রাফিক্স লাইব্রেরি, যা আবার ব্রাউজারের উপর নির্ভর করে এসভিজি বা ভিএমএল সমর্থন করে।

আর একটি যা সাহায্য করতে পারে: এসভিজিওয়েব

এর সবকটির অর্থ আপনি বিটম্যাপ গ্রাফিক্স ছাড়াই আপনার IE ব্যবহারকারীদের সমর্থন করতে পারেন।

এই প্রশ্নের শীর্ষের উত্তরটিও দেখুন , উদাহরণস্বরূপ: এক্সএসএল ভিভিএলে রূপান্তর এসভিজি


রাফেল উল্লেখ করার জন্য +1, এটি ক্রস ব্রাউজার ভেক্টর গ্রাফিক্সের দুর্দান্ত বাস্তবায়নের জন্য অবশ্যই একটি ভাল সমাধান এবং তদন্তের উপযুক্ত।
ডিএমপি

10

এসভিজিকে স্বচ্ছ পিএনজিতে রূপান্তর করার সময়, এইটি আগে রেখে দিতে ভুলবেন না $imagick->readImageBlob():

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

চিত্রটি পড়ার আগে কীভাবে সেই পদ্ধতিটি কল করা সম্ভব, আমি একটি ত্রুটি পেয়েছি "খালি ইমেজিক অবজেক্টটি প্রক্রিয়া করতে পারি না"। এবং হ্যাঁ আমার ইমেজিক এক্সটেনশানটি ইনস্টল হয়ে গেছে কারণ এটি কাজ করছে এবং চিত্রগুলিকে রূপান্তর করছে।
ডেনিস 2310

6

এটি v। সহজ, গত কয়েক সপ্তাহ ধরে এটি নিয়ে কাজ করা হয়েছে।

আপনার বাটিক এসভিজি টুলকিট দরকার । ডাউনলোড করুন, এবং যে ডিরেক্টরিটিকে আপনি জেপিজিতে রূপান্তর করতে চান সেই একই ডিরেক্টরিতে ফাইলগুলি স্থাপন করুন , এটিও নিশ্চিত করুন যে আপনি প্রথমে এটি আনজিপ করে নিন।

টার্মিনালটি খুলুন এবং এই কমান্ডটি চালান:

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

এটিতে এসভিজি ফাইলের একটি জেপিজি আউটপুট করা উচিত। সত্যিই সহজ। এমনকি আপনি এটিকে কেবল একটি লুপে রাখতে পারেন এবং এসভিজিকে বোঝাতে রূপান্তর করতে পারেন,

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

এটা অসাধারণ. বখশিশের জন্য ধন্যবাদ. আমি টেমপ্লেট থেকে তৈরি এসভিজি ফাইলগুলির ব্যাচ-প্রক্রিয়া লোডের সাথে পার্লের সাথে একত্রে এটি ব্যবহার করতে যাচ্ছি।
সিমবাচ

2

আমি স্বতন্ত্র পিএইচপি / অ্যাপাচি সমাধান সম্পর্কে জানি না, কারণ এর জন্য এমন একটি পিএইচপি লাইব্রেরির প্রয়োজন হবে যা এসভিজি চিত্রগুলি পড়তে এবং রেন্ডার করতে পারে। আমি নিশ্চিত নই যে এ জাতীয় গ্রন্থাগার রয়েছে - আমি কোনও কিছুই জানি না।

ইমেজম্যাগিক হ'ল কমান্ড লাইন বা পিএইচপি বাইন্ডিং, ইম্যাগিকের মাধ্যমে এসভিজি ফাইলগুলি রাস্টারাইজ করতে সক্ষম হয়েছে তবে মনে হয় এই ফোরামের থ্রেডে যেমন দেখানো হয়েছে তেমন অনেকগুলি স্পর্শ এবং বাহ্যিক নির্ভরতা রয়েছে । আমি মনে করি এটি এখনও যাওয়ার সবচেয়ে প্রতিশ্রুতিবদ্ধ উপায়, এটিই প্রথম জিনিস যা আমি যদি আপনি হতাম তবেই সন্ধান করব।


2

মানক পিএইচপি জিডি সরঞ্জাম ব্যবহার করে কোনও এস জি জি চিত্রকে জিআইফে রূপান্তর করার জন্য এটি একটি পদ্ধতি

1) আপনি ব্রাউজারে ক্যানভাস উপাদানটিতে চিত্রটি রেখেছেন:

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

এবং তারপরে এটিকে সার্ভারে (প্রসেসপিকচার.এইচপিপি) পিএনজি (ডিফল্ট) থেকে জিআইএফ এ রূপান্তর করুন এবং এটি সংরক্ষণ করুন। (আপনি পিএনজি হিসাবেও সংরক্ষণ করতে পারতেন তবে চিত্র জিএফের পরিবর্তে ইমেজপিএনজি ব্যবহার করুন):

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

-1

আপনি রাফাল — জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারেন এবং এটি সহজেই অর্জন করতে পারেন। এটি আইইতেও কাজ করবে।


2
লিঙ্কটিতে উপস্থিত বিশদ যুক্ত করুন। লিঙ্কটি যে কোনও সময় ভেঙে যেতে পারে
সাগর জৈন

-1
$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);

বা ব্যবহার করে: পট্রেস ডেমো: টুল4dev.com

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.