代码之家 › 专栏 › 技术社区 › Shikiryu DhruvJoshi

在画布中将Raphael JS生成的SVG保存为png时出现问题

raphael svg canvas jquery javascript

Shikiryu DhruvJoshi · 技术社区 · 14 年前

Raphael JS (以及用户,因为您可以拖动和旋转图像)。我跟着这个 Convert SVG to image (JPEG, PNG, etc.) in the browser

这一定很容易,但我不能指出我做错了什么。

#ec 作为 id 画布的一个是 #canvas

function saveDaPicture(){
    var img = document.getElementById('canvas').toDataURL("image/png");
    $('body').append('<img src="'+img+'"/>');
}
$('#save').click(function(){
    var svg = $('#ec').html();
    alert(svg);
    canvg('canvas', svg, {renderCallback: saveDaPicture(), ignoreMouse: true, ignoreAnimation: true});
});

警报告诉我:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">
<desc>Created with Raphael</desc>
<defs></defs>
<image x="0" y="0" width="300" height="512" preserveAspectRatio="none" href="imageurl.jpg"></image>
<rect x="168" y="275" width="52" height="70" r="0" rx="0" ry="0" fill="none" stroke="#000" stroke-dasharray="8,3" transform="rotate(21.91207728 194 310)" style="opacity: 1; display: none; " opacity="1"></rect>
<circle cx="50" cy="50" r="50" fill="none" stroke="#000"></circle>
<image x="358" y="10" width="39" height="138" preserveAspectRatio="none" href="imageurl2.png" style="cursor: move; "></image>
<image x="397" y="10" width="99" height="153" preserveAspectRatio="none" href="imageurl3.png" style="cursor: move; "></image>
<image x="184" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl4.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="204" y="286" width="10" height="10" preserveAspectRatio="none" href="imageurl5.png" style="cursor: pointer; opacity: 1; display: none; " opacity="1"></image>
<image x="170" y="277" width="48" height="66" preserveAspectRatio="none" href="imageurl6.png" style="cursor: move; opacity: 1; " r="50" opacity="1" transform="rotate(21.91207728 194 310)"></image>
</svg>

canvg documentation

无论如何,有了这段代码,变量 img ,它应该有转换后的图像数据,得到带有svg维度的空png的数据。

我想唯一的事情是Raphael JS生成的svg没有很好地为canvg格式化(比如, href image 应该是 xlink:href the W3C recommandations )

有人知道这个问题吗?:天

3 回复 | 直到 8 年前

Livingston Samuel 13 年前

canvg 接受 SVG 数据文件路径或单行字符串

#ec 作为

canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});

两个jQuery的 $.html() innerHTML 方法按原样返回元素的HTML内容,因此很可能是在多行中。

将多行html内容解释为文件路径,

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="512">

并尝试从格式错误的url获取数据。

这是一个更新的版本,应该可以用,

function saveDaPicture(){
    var img = document.getElementById('canvas').toDataURL("image/png");
    $('body').append('<img src="'+img+'"/>');
}

$('#save').click(function(){
    var svg = $('#ec').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
                             // strips off all spaces between tags
    //alert(svg);
    canvg('canvas', svg, {renderCallback: saveDaPicture, ignoreMouse: true, ignoreAnimation: true});
});

Ignacio Vazquez 13 年前

js将解决此错误。看看这篇博文 Export Raphael Graphic to Image

amosrivera 14 年前

SVG - Edit 生成SVG图像,我们所做的就是安装 ImageMagic 在服务器上(您可能已经安装了它)。

shell_exec("convert image.svg image.png");

在php中完成了。