我正在向服务器发送SVG文件的字符串表示,并使用Imagick以下列方式将其转换为jpeg:
$image = stripslashes($_POST['json']);
$filename = $_POST['filename'];
$unique = time();
$im = new Imagick();
$im->readImageBlob($image);
$im->setImageFormat("jpeg");
$im->writeImage('../photos/' . $type . '/humourised_' . $unique . $filename);
$im->clear();
$im->destroy();
但是我希望在光栅化之前调整SVG的大小,以便生成的图像大于SVG文件中指定的尺寸。
我将代码修改为以下内容:
$image = stripslashes($_POST['json']);
$filename = $_POST['filename'];
$unique = time();
$im = new Imagick();
$im->readImageBlob($image);
$res = $im->getImageResolution();
$x_ratio = $res['x'] / $im->getImageWidth();
$y_ratio = $res['y'] / $im->getImageHeight();
$im->removeImage();
$im->setResolution($width_in_pixels * $x_ratio, $height_in_pixels * $y_ratio);
$im->readImageBlob($image);
$im->setImageFormat("jpeg");
$im->writeImage('../photos/' . $type . '/humourised_' . $unique . $filename);
$im->clear();
$im->destroy();
此代码应解决分辨率并相应调整SVG的大小。如果SVG画布及其元素具有基于“百分比”的宽度,则它可以完美地工作,但是它似乎不适用于“px”中定义的元素。不幸的是,这是一项要求。
将发送到服务器的典型SVG字符串如下所示:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg id="tempsvg" style="overflow: hidden; position: relative;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="333" version="1.1" height="444">
<image transform="matrix(1,0,0,1,0,0)" preserveAspectRatio="none" x="0" y="0" width="333" height="444" xlink:href="http://www.songbanc.com/assets/embed/photos/full/133578615720079914224f9e7aad9ac871.jpg"></image>
<image transform="matrix(1,0,0,1,0,0)" preserveAspectRatio="none" x="85.5" y="114" width="50" height="38" xlink:href="http://www.songbanc.com/assets/embed/humourise/elements/thumb/thumb_lips4.png"></image>
<path transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#000" d="M110.5,133L140.5,133" stroke-dasharray="- " opacity="0.5"></path>
<circle transform="matrix(1,0,0,1,0,0)" cx="140.5" cy="133" r="5" fill="#000" stroke="#000"></circle>
<path transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#000" d="M110.5,133L110.5,155.8" stroke-dasharray="- " opacity="0.5"></path>
<circle transform="matrix(1,0,0,1,0,0)" cx="110.5" cy="155.8" r="5" fill="#000" stroke="#000"></circle>
<circle transform="matrix(1,0,0,1,0,0)" cx="110.5" cy="133" r="5" fill="#000" stroke="#000"></circle>
</svg>
正如您所看到的,构成此SVG的元素具有像素定义宽度和高度(遗憾的是,使用百分比不是此应用程序的选项)
这有什么办法吗?或者将SVG转换为png并以给定大小呈现它而不会降低质量的任何其他方法。
感谢。
编辑:虽然我从未真正设法找到一个完美的解决方案。相反,我结束了以json的形式发送SVG数据,在服务器端循环并将像素缩放到预期的高度。然后,经过多次试验和错误后,我意识到imagemagick与标准SVG转换/旋转命令有问题,将任何被操纵的元素抛出。我最终切换'inkscape'来将生成的SVG渲染为栅格化图像。一切都很好。我仍在深入挖掘潜在的公式化解决方案,以抵消imagemagick所带来的差异。如果我有任何成功,我会再次更新这个问题。
答案 0 :(得分:12)
作为php_imagick's bug的解决方法,您可以缩放svg的width =“..”和height =“..”:
function svgScaleHack($svg, $minWidth, $minHeight)
{
$reW = '/(.*<svg[^>]* width=")([\d.]+px)(.*)/si';
$reH = '/(.*<svg[^>]* height=")([\d.]+px)(.*)/si';
preg_match($reW, $svg, $mw);
preg_match($reH, $svg, $mh);
$width = floatval($mw[2]);
$height = floatval($mh[2]);
if (!$width || !$height) return false;
// scale to make width and height big enough
$scale = 1;
if ($width < $minWidth)
$scale = $minWidth/$width;
if ($height < $minHeight)
$scale = max($scale, ($minHeight/$height));
$width *= $scale*2;
$height *= $scale*2;
$svg = preg_replace($reW, "\${1}{$width}px\${3}", $svg);
$svg = preg_replace($reH, "\${1}{$height}px\${3}", $svg);
return $svg;
}
然后你可以轻松创建漂亮透明的PNG!
createThumbnail('a.svg', 'a.png');
function createThumbnail($filename, $thname, $size=50)
{
$im = new Imagick();
$svgdata = file_get_contents($filename);
$svgdata = svgScaleHack($svgdata, $size, $size);
$im->setBackgroundColor(new ImagickPixel('transparent'));
$im->readImageBlob($svgdata);
$im->setImageFormat("png32");
$im->resizeImage($size, $size, imagick::FILTER_LANCZOS, 1);
file_put_contents($thname, $im->getImageBlob());
$im->clear();
$im->destroy();
}
注意: 我一直在寻找一种解决方案,如何从最初的小尺寸重新调整SVG。然而,似乎imagick :: setResolution已被打破。但是,ImageMagick库本身正在工作,因此您可以使用exec('convert ...')(出于安全原因可能会被托管提供商禁用)。
所以要从较小的svg创建缩略图50x50,你可以这样做:
convert -density 500 -resize 50 50 -background transparent a.svg PNG32:a.png
答案 1 :(得分:1)
我一直在寻找一个解决方案,我在阅读这篇文章之后找到了this,并且像魅力一样工作:
$im = new Imagick();
$im->readImage("/path/to/image.svg");
$res = $im->getImageResolution();
$x_ratio = $res['x'] / $im->getImageWidth();
$y_ratio = $res['y'] / $im->getImageHeight();
$im->removeImage();
$im->setResolution($width_in_pixels * $x_ratio, $height_in_pixels * $y_ratio);
$im->readImage("/path/to/image.svg");
// Now you can do anything with the image, such as convert to a raster image and output it to the browser:
$im->setImageFormat("png");
header("Content-Type: image/png");
echo $im;
在php手册页面中,可以转到该评论的作者。
答案 2 :(得分:1)
你不需要想象力来完成这项任务。 例如,你不会调整你的svg(w:60px,h:70px)=&gt; (w:36px,h:36px)获取按钮的图标。
$svg = file_get_contents($your_svg_file);
// I prefer to use DOM, because it's safer and easier as to use preg_match
$svg_dom = new DOMDocument();
libxml_use_internal_errors(true);
$svg_dom->loadXML($svg);
libxml_use_internal_errors(false);
//get width and height values from your svg
$tmp_obj = $svg_dom->getElementsByTagName('svg')->item(0);
$svg_width = floatval($tmp_obj->getAttribute('width'));
$svg_height = floatval($tmp_obj->getAttribute('height'));
// set width and height of your svg to preferred dimensions
$tmp_obj->setAttribute('width', 36);
$tmp_obj->setAttribute('height', 36);
// check if width and height of your svg is smaller than the width and
// height you set above => no down scaling is needed
if ($svg_width < 36 && $svg_height < 36) {
//center your svg content in new box
$x = abs($svg_width - 36) / 2;
$y = abs($svg_height - 36) / 2;
$tmp_obj->getElementsByTagName('g')->item(0)->setAttribute('transform', "translate($x,$y)");
} else {
// scale down your svg content and center it in new box
$scale = 1;
// set padding to 0 if no gaps are desired
$padding = 2;
// get scale factor
if ($svg_width > $svg_height) {
$scale = (36 - $padding) / $svg_width;
} else {
$scale = (36 - $padding) / $svg_height;
}
$x = abs(($scale * $svg_width) - 36) / 2;
$y = abs(($scale * $svg_height) - 36) / 2;
$tmp_obj->getElementsByTagName('g')->item(0)->setAttribute('transform', "translate($x,$y) scale($scale,$scale)");
file_put_contents('your_new_svg.svg', $svg_dom->saveXML());
}
设置translate(x,y)时要小心,因为你的svg内容可能会在框外设置,除了背景外你什么也看不见。
只有当您的初始翻译设置为(0,0)时,我的上述脚本才能正常工作。你可以用这个
$svg_path = $svg_dom->getElementsByTagName('path')->item(0);
$svg_g = $svg_dom->getElementsByTagName('g')->item(0);
$transform = $svg_g->getAttribute('transform');
// get x and y of translate
$transform = substr($transform, strlen('translate('));
$transform = substr($transform, 0, strlen($transform)-1);
$transform_data = explode(',', $transform);
// get path data
$d = $svg_path->getAttribute('d');
$d_data = explode(' ', $d);
$tmp = explode(',', $d_data[1]);
$d_data[1] = ($tmp[0] + $transform_data[0]).','.($tmp[1]+$transform_data[1]);
$svg_path->setAttribute('d', implode(' ', $d_data));
$svg_g->setAttribute('transform','translate(0,0)');
file_put_contents('your_new_svg.svg',$svg_dom->saveXML());
将转换设置为(0,0)并将路径数据调整为新设置,因为路径数据取决于转换,反之亦然。
我使用这两个脚本来生成png图标,方法是将我的svg图标调整为我需要的尺寸并将它们转换为png而不会降低质量。
我希望我的意思很清楚。
答案 3 :(得分:0)
下面是一个示例,介绍如何获取已存在于字符串中的图像(例如,从数据库中),并调整其大小,添加边框并将其打印出来。我使用它来显示经销商徽标
// Decode image from base64
$image=base64_decode($imagedata);
// Create Imagick object
$im = new Imagick();
// Convert image into Imagick
$im->readimageblob($image);
// Create thumbnail max of 200x82
$im->thumbnailImage(200,82,true);
// Add a subtle border
$color=new ImagickPixel();
$color->setColor("rgb(220,220,220)");
$im->borderImage($color,1,1);
// Output the image
$output = $im->getimageblob();
$outputtype = $im->getFormat();
header("Content-type: $outputtype");
echo $output;