将画布保存为服务器上的svg和json
我想将画布(它具有图像,文本,形状等)保存到服务器上的svg。将画布保存为服务器上的svg和json
实际上,我希望画布以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:
JSON是结构化数据的格式。没有有意义的方式将图像保存为JSON。
对于SVG,它是矢量图形的格式,而从画布获得的图像是光栅化图像。从光栅图像到矢量图像的转换通常被认为是一个坏主意。您可以阅读ImageMagick库上的tutorial。虽然库提供了这种转换,但它会发出警告
换句话说,来自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文件中。宽度和高度的值必须用画布的大小替换。你必须传递他们在您的POST请求:
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');
});
});
});
从技术上讲,所有的画布图都是结构化的(通常以js代码形式),因此可以转换为像json这样的更易于移动的结构。关键点在于即时生成此结构,而不是在呈现时(您保存命令,而不是绘图)。另外,只在svg中嵌入光栅图像是一个非常糟糕的主意,您只需创建一个较重且可缩放的原始版本。 – Kaiido
您可能希望在一些JS对象的所有图纸帆布(路径声明等)保存,以便能够在整个救不为SVG或JSON 。一些camvas库提供这个功能(例如fabricjs),但是你必须从头开始使用它们。如果您不使用库,那么只有您可以知道json格式应该是什么样子才能重现图形。 – Kaiido