Сохранить холст как SVG и JSON на сервере

Question

Сохранить холст как SVG и JSON на сервере

Я хочу сохранить холст (он имеет изображение, текст, форму и т. д.) в SVG на сервере.

на самом деле я хочу, чтобы холст сохранил холст в 3 форматах — файл png, файл svg и файл JSON.

это мой холст в png код:

JQuery:

jQuery(document).ready(function(){
jQuery('#btnSave').click(function(){
var pic =document.getElementById("myCanvas").toDataURL('image/png');
$.ajax({
type: "POST",
url: "script.php",
data: {
img: pic
}
}).done(function(o) {
console.log('saved');
});
});
});

PHP-код (script.php):

if (isset($_POST['img'])) {
define('UPLOAD_DIR', 'uploaddesign/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
}

Кто-нибудь знает, как сохранить холст в двух других форматах, SVG и JSON:

0

canvas jquery json php svg

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

JSON — это формат для структурированных данных. Нет никакого существенного способа сохранить изображение как JSON.

Что касается SVG, то это формат для векторной графики, а изображение, полученное с холста, является растеризованным изображением. Преобразование растровых изображений в векторные изображения в большинстве случаев считается плохой идеей. Вы можете прочитать об этом, например, в руководство в библиотеке ImageMagick. Хотя библиотека предлагает такое преобразование, она предупреждает

Другими словами, любой вывод из IM никогда не будет истинным векторным форматом. Хотя он может конвертировать свой внутренний растровый формат в файл векторного формата, в результате получается лишь поверхностная векторная оболочка для изображения вокруг изображения в растровом формате. И если растровое изображение не будет правильно определено (с правильным разрешением) для устройства вывода, результат будет не особенно хорошим.

К сожалению, новые пользователи IM ничего не знают об этом. Они видят в IM конвертер, который может конвертировать PDF, например, в Postscript, создавая изображения с «блочными» эффектами сглаживания, «размытыми» цветами или размытыми изображениями, которые просто не очень хорошо выглядят, на предполагаемом устройстве вывода.

То, что здесь сказано о PDF в Postscript, также будет верно для PNG в SVG. И это не особенность этой библиотеки, а основная проблема всех преобразований растра в вектор.

Тем не менее, «лучший» способ конвертировать PNG-изображения в SVG-изображения — это упомянутая «поверхностная векторная оболочка». Это означает, что вы должны определить изображение SVG, которое отображает изображение PNG, так же, как страница HTML отображает изображение, определенное как URL-адрес данных. SVG — это формат файла XML, который может быть построен на PHP следующим образом:

// $_POST validation

$str = <<<XML
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"width="$_POST['width']"height="$_POST['height']">
<image xlink:href="$_POST['img']"width="$_POST['width']"height="$_POST['height']">
</svg>
XML;

$svg = new DOMDocument('1.0', 'UTF-8');
$svg->xmlStandalone = false;
$svg->loadXML($str);

$file = UPLOAD_DIR . uniqid() . '.svg';
file_put_contents($file, $svg->saveXML());

Строка URL-адреса данных должна быть скопирована в файл SVG. Значения ширины и высоты должны быть заменены размером холста. Вы должны будете передать их в своем почтовом запросе:

jQuery(document).ready(function(){
jQuery('#btnSave').click(function(){
var pic = document.getElementById("myCanvas");
$.ajax({
type: "POST",
url: "script.php",
data: {
img: pic.toDataURL('image/png'),
width: pic.width
height: pic.height
}
}).done(function(o) {
console.log('saved');
});
});
});

0