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