[php] PHP를 사용하여 SVG 이미지를 PNG로 변환

당신이 이것을 물었다는 것은 재밌습니다. 저는 최근에 제 작업 사이트를 위해 이것을했습니다. 그리고 저는 튜토리얼을 작성해야한다고 생각하고있었습니다 … ImageMagick을 사용하는 PHP / Imagick으로 이것을하는 방법은 다음과 같습니다 :

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

정규식 색상 교체 단계는 svg 경로 xml과 ID 및 색상 값이 저장되는 방법에 따라 다를 수 있습니다. 서버에 파일을 저장하지 않으려면 이미지를 base 64로 출력 할 수 있습니다.

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

(clear / destroy를 사용하기 전에)하지만 즉, PNG에 base64로 문제가 있으므로 base64를 jpeg로 출력해야 할 것입니다.

여기에서 전 고용주의 판매 지역지도에 대한 예를 볼 수 있습니다.

시작 : https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg

끝:

편집하다

위의 글을 쓴 이후로 두 가지 개선 된 기술을 생각해 냈습니다.

1) 상태 채우기를 변경하는 정규식 루프 대신 CSS를 사용하여 다음과 같은 스타일 규칙을 만듭니다.

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

그런 다음 imagick jpeg / png 생성을 진행하기 전에 css 규칙을 svg에 삽입하기 위해 단일 텍스트 교체를 수행 할 수 있습니다. 색상이 변경되지 않으면 CSS를 재정의하는 경로 태그에 인라인 채우기 스타일이 없는지 확인하십시오.

2) 실제로 jpeg / png 이미지 파일을 만들 필요가없고 오래된 브라우저를 지원할 필요도 없다면 jQuery를 사용하여 직접 svg를 조작 할 수 있습니다. img 또는 object 태그를 사용하여 svg를 포함 할 때 svg 경로에 액세스 할 수 없으므로 다음과 같이 웹 페이지 html에 svg xml을 직접 포함해야합니다.

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

답변

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

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

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