前端和後端實現SVG轉圖片
使用者通過介面操作SVG內容,當生成或者編輯SVG時,實時將SVG內容轉換成Base64編碼的img標籤,塞回到原來的DOM節點中。此種方式在前端通過瀏覽器就可以完成,無須後端的參與。
方案原理是使用canvas做中轉,將svg+xml轉換成png。在無需後端參與做二次處理時,可以滿足業務場景。
// 前端demo程式碼 function drawInlineSVG($svg, callback) { var svg = $svg[0]; svg.innerHTML = '<rect width="100%" height="100%" fill="#ffffff"></rect>' + svg.innerHTML; var svgData = new XMLSerializer().serializeToString( svg ); var canvas = document.createElement( "canvas" ); var ctx = canvas.getContext( "2d" ); var img = document.createElement( "img" ); img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( unescape(encodeURIComponent(svgData)) ) ); img.onload = function () { ctx.drawImage( img, 0, 0 ); canvas.toDataURL( "image/png" ); callback && callback(this); }; var $img = $(img); $img.height($svg.height()); $img.width($svg.width()); return $img; }
前端生成png,定時提交到後臺
在需要後臺做二次處理時,可以藉助於上述的前端方案,通過ajax請求定時、實時的將圖片上傳到伺服器。
原理是使用字串將base64編碼的圖片實時上傳,在後臺再做解碼生成圖片原型,落地到後臺。因為需要實時轉換和上傳,對後端和前端的壓力都比較大。
// 前端demo程式碼 var data = $('#canvasimage').attr('src'); // Base 64 $.ajax({ type: "POST", url: url, dataType: 'text', data: { base64data : data } });
//後端demo程式碼 $data = 'data:image/png;base64,AAAFBfj42Pj4'; list($type, $data) = explode(';', $data); list(, $data)= explode(',', $data); $data = base64_decode($data); file_put_contents('/tmp/image.png', $data);
後端方案
引入PHP imagemagic擴充套件
PHP的imagemagic擴充套件,可以對SVG操作。使用方法也很簡單。但因為imagemagic爆出的安全問題,生產環境一直沒有裝此擴充套件。對安全性要求不高的業務,可以使用。https://www.cvedetails.com/vulnerability-list/vendor_id-1749/Imagemagick.html
$image = new Imagick(); $image->readImageBlob(file_get_contents('image.svg')); $image->setImageFormat("png24"); $image->resizeImage(1024, 768, imagick::FILTER_LANCZOS, 1); $image->writeImage('image.png');
引入batik-rasterizer
batik-rasterizer是Apache基金會下使用Java編寫的處理SVG的工具包,要求安裝Java 1.6以上的執行時。原理是使用Mozilla Rhino作為JavaScript引擎,生成了一套瀏覽器環境。https://xmlgraphics.apache.org/batik/tools/rasterizer.html
建議使用最高版本的釋出包,高版本對SVG和樣式的支援性會更好。目前最新版batik-rasterizer已經支援
和外部引用CSS樣式,但不支援SVG中foreignObject和通過xmlns=”http://www.w3.org/1999/xhtml"引用HTML標籤。## shell呼叫 java -jar batik-rasterizer.jar samples/batikFX.svg
## PHP呼叫 function export($svg, $output_full_path, $type = 'png', $width = null) { if (get_magic_quotes_gpc()) { $svg = stripslashes($svg); } if(strpos($svg,"<!ENTITY") !== false){ return false; } if ($type == 'png') { $typeString = '-m image/png'; } elseif ($type == 'jpeg') { $typeString = '-m image/jpeg'; } elseif ($type == 'pdf') { $typeString = '-m application/pdf'; $ext = 'pdf'; } $svgTmpPathArr = explode('/', $output_full_path); unset($svgTmpPathArr[count($svgTmpPathArr)-1]); $tempName = time() . rand(); $svgTmpPath = implode('/', $svgTmpPathArr) . "/$tempName.svg"; if (!file_put_contents($svgTmpPath, $svg)) { return false; } if (!empty($width)) { $width = (int)$width; if ($width) { $width = "-w $width"; } } if(!file_exists($output_full_path)) { $handle = fopen($output_full_path, "w"); fclose($handle); } @shell_exec("java -jar ".$batik_rasterizer_path ." $typeString -d $output_full_path $width $svgTmpPath"); unlink($svgTmpPath); if (!is_file($output_full_path) || filesize($output_full_path) < 10) { return false; } else { return $output_full_path; } } function transfer_svg_to_images($content) { $images = array(); //特殊樣式的處理 $svg_tag_pattern = '/(<rect[^<]*?)\>\<\/rect\>/i'; $styles = ' style="fill:#ececff; stroke:#9370db; stroke-width:1"'; $content = preg_replace_callback($svg_tag_pattern, function($matches) use($styles) { return str_replace($matches[1], $matches[1] . $styles, $matches[0]); }, $content); //移除不支援標籤 $svg_tag_pattern = '/(<div xmlns=[^<]*?\>)[\s\S]*?(\<\/div\>)/i'; $content = preg_replace_callback($svg_tag_pattern, function($matches) { $tmp_str = str_replace($matches[1], '<text y="10">', $matches[0]); $tmp_str = str_replace($matches[2], '</text>',$tmp_str); $tmp_str = str_replace('span', 'tspan',$tmp_str); return $tmp_str; }, $content); //移除不支援標籤 $content = str_replace('foreignObject', 'g', $content); $svg_str_pattern = '/\<svg[\s\S]*?\<\/svg\>/i';//匹配富文字中SVG內容 $ret = preg_replace_callback($svg_str_pattern, function($matches) use(&$images) { $image_path ='/tmp/'. time(). rand() .'svg.png'; $image_path = export($matches[0], $image_path); //實際匯出處理 $ret_path = null; if(file_exists($image_path)){ $images[] = $image_path; $ret_path = '<img src="' . $image_path . '" />'; } return $ret_path; }, $content); return array($ret, $images); }
其他問題
SVG本身是屬於W3C XML的分支,瀏覽器的實現方式和支援程度也不一樣,在後端尤其如此。因為本身的語言標準以及CSS樣式控制的問題,導致實際圖片和瀏覽器預覽都有差異,往往都需要使用正則對原始SVG文字做hack處理。尤其是後端的兩種匯出方式。
前端相比後端轉換,相容性和支援性會好很多。當然具體使用那種轉換方式,還是需要針對業務場景。