Я отправляю строковое представление 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="#" onclick="location.href='http://www.songbanc.com/assets/embed/photos/full/133578615720079914224f9e7aad9ac871.jpg'; return false;"></image>
<image transform="matrix(1,0,0,1,0,0)" preserveAspectRatio="none" x="85.5" y="114" width="50" height="38" xlink:href="#" onclick="location.href='http://www.songbanc.com/assets/embed/humourise/elements/thumb/thumb_lips4.png'; return false;"></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 и рендеринг его при заданном размере без потери качества.
Спасибо.
EDIT: Хотя мне никогда не удавалось найти идеальное решение. Вместо этого я закончил передачу SVG-данных как json, прокручивая его серверную сторону и масштабируя пиксели до предполагаемой высоты.
Затем, после долгих проб и ошибок, я понял, что у imagemagick есть проблемы с стандартными командами трансформирования/поворота SVG, которые бросают любые управляемые элементы из-под удара. В итоге я переключил слишком "inkscape", чтобы визуализировать полученный SVG как растрированное изображение. И все хорошо. Я все еще вникаю в потенциальное формульное решение, чтобы компенсировать различия, которые создает imagemagick. Если у меня все получится, я снова обновлю этот вопрос.