我正在尝试创建一个网站,您可以使用Raphael.js在另一个图像上绘制图像。绘图部件已完成,我可以将这些行导出为png。我将图像插入由功能paper.image()
生成的SVG raphael;不幸的是我的导出功能不包括导入的图像。
这些是我正在使用的脚本,但我认为我并不是全部使用它们。
<script src="../jquery-2.0.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="rgbcolor.js"></script>
<script src="canvg.js"></script>
<script src="StackBlur.js"></script>
<script src="svg.min.js"></script>
这是导出函数$('#save')。onmousedown ...
var canvas = document.getElementById('canvas2');
var svg = document.getElementById('canvas');
svg = svg.innerHTML;
canvg(canvas, svg);
var img_url = canvas.toDataURL('image/png');
$('#converted_image').attr('src', img_url);
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
这是我如何通过一个代表图像$('#img1').onmousedown
的按钮导入图像...
paper.clear();
var c = paper.image("images/img1.png", 10, 10, 200, 200);
以下是dom-tree中输出的样子,图像和白线为例。
<div id="canvas">
<svg height="300" version="1.1" width="300"
xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative; " id="canvassvg">
<desc>Created with Raphaël 2.1.0</desc>
<defs></defs>
<image x="10" y="10" width="200" height="200"
preserveAspectRatio="none" href="images/img1.png">
</image>
<path style="stroke-linecap: round; stroke-linejoin: round; "
fill="none" stroke="#ffffff"
d="M383,201L383,201L383,202L383,203"
stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
</path>
</svg>
</div>
非常感谢您的回复,请原谅我的英语。
我已经使用Batik成功完成了这项工作,你可以在这里下载:http://xmlgraphics.apache.org/batik/tools/rasterizer.html
一旦你拥有SVG,只需将svg保存到文件并将其传递给蜡染,你就完成了!输出一个非常好的PNG(甚至可以在远程包含图像时工作)。
你尝试过Canvas drawImage()方法吗?
示例:https://developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html
答案提出here为我工作!
定义Raphael对象后,您应该执行以下操作:
raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink");
我认为它应该工作
<div id="forsvgtopng">
<div id="svgelemntdiv">
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="150" height="150" fill="rgb(0, 255, 0)" stroke-width="1" stroke="rgb(0, 0, 0)"/>
</svg>
</div>
<div class="canvasdiv">
<canvas ></canvas>
</div>
<div class="pngdiv">
<img id="svgpng" />
</div>
</div>
调用像convertvg这样的javascript函数('#forsvgtopng')
function convertsvg(selectors) {
[].forEach.call(document.querySelectorAll(selectors), function (div) {
try {
var sourceImage;
var imgs = document.getElementById('svgpng'),
svg = div.querySelector('svg'),
can = div.querySelector('canvas'),
ctx = can.getContext('2d');
can.width =500;
can.height = 550;
sourceImage = new Image;
sourceImage.width = can.width;
sourceImage.height = can.height;
sourceImage.onload = function () {
ctx.drawImage(sourceImage,80,90);
imgs.src = can.toDataURL();
};
sourceImage.src = svg ? svgDataURL(svg) :"";
} catch (e) { console.log(e) }
});
}}
function svgDataURL(svg) {
var svgAsXML = (new XMLSerializer).serializeToString(svg);
return "data:image/svg+xml," + encodeURIComponent(svgAsXML);
}