Canvg|将SVG转换为Canvas以输出为图像
Canvg | Converting SVG to Canvas to output as image
我在SVG中有一个复杂的交互式图形。我想把SVG变成一个隐藏的画布,这样我就可以允许用户以png/pdf格式输出。
test111.js创建div#forSVG,然后在其中创建svg#svg(加上圆圈、路径和文本)。
<html>
<head>
<link rel="stylesheet" type="text/css" href="sql.css">
<script type="text/javascript" src="d3.v3.js"></script>
<script type="text/javascript">
function start() {
var canvas = document.getElementById("canvas");
var svg = document.getElementById("forSVG");
var svgWider = svg.outerHTML;
console.log(svg);
canvg(canvas, svg);
}
</script>
</head>
<body onload="start()">
<script type="text/javascript" src="test111.js"></script>
<script type="text/javascript" src="rgbcolor.js"></script>
<script type="text/javascript" src="StackBlur.js"></script>
<script type="text/javascript" src="canvg.js"></script>
<canvas id="canvas" width="100%" height="600px"></canvas>
</body>
我尝试过使用svg#svg、div#forSVG和div.outerHTML作为canvg函数的输入,但我经常会遇到这样的错误:
TypeError: undefined is not a function (evaluating 's.substr(0,1)')
有不同的错误,但它们都在canvg.js的第50行附近,我怀疑它们都与s变量未定义有关。编辑1640:canvg.js的相关行告诉我们s是什么:
this.canvg = function (target, s, opts) {
因此,当我调用canvg(canvas,svg)时,我认为s是我输入的svg变量(opts是可选的)。Console.logging(svg类型)返回对象。
canvg.js:的前60行
/*
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner (gabelerner@gmail.com)
* http://code.google.com/p/canvg/
*
* Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
*/
(function(){
// canvg(target, s)
// empty parameters: replace all 'svg' elements on page with 'canvas' elements
// target: canvas element or the id of a canvas element
// s: svg string, url to svg file, or xml document
// opts: optional hash of options
// ignoreMouse: true => ignore mouse events
// ignoreAnimation: true => ignore animations
// ignoreDimensions: true => does not try to resize canvas
// ignoreClear: true => does not clear canvas
// offsetX: int => draws at a x offset
// offsetY: int => draws at a y offset
// scaleWidth: int => scales horizontally to width
// scaleHeight: int => scales vertically to height
// renderCallback: function => will call the function after the first render is completed
// forceRedraw: function => will call the function on every frame, if it returns true, will redraw
this.canvg = function (target, s, opts) {
// no parameters
if (target == null && s == null && opts == null) {
var svgTags = document.querySelectorAll('svg');
for (var i=0; i<svgTags.length; i++) {
var svgTag = svgTags[i];
var c = document.createElement('canvas');
c.width = svgTag.clientWidth;
c.height = svgTag.clientHeight;
svgTag.parentNode.insertBefore(c, svgTag);
svgTag.parentNode.removeChild(svgTag);
var div = document.createElement('div');
div.appendChild(svgTag);
canvg(c, div.innerHTML);
}
return;
}
if (typeof target == 'string') {
target = document.getElementById(target);
}
// store class on canvas
if (target.svg != null) target.svg.stop();
var svg = build(opts || {});
// on i.e. 8 for flash canvas, we can't assign the property so check for it
if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg;
var ctx = target.getContext('2d');
if (typeof(s.documentElement) != 'undefined') {
// load from xml doc
svg.loadXmlDoc(ctx, s);
}
else if (s.substr(0,1) == '<') {
// load from xml string
svg.loadXml(ctx, s);
}
else {
// load from url
svg.load(ctx, s);
}
}
编辑结束
有人能认出我做错了什么吗?变量svg在查找动态创建的div和svg时没有遇到任何问题(它们正在正确地记录到控制台)。感谢
谢谢TJ-你的观点帮助我走上了正确的方向。
Canvg似乎需要一个字符串或html输入,而不是一个对象。所以这是有效的:
var canvas = document.getElementById("canvas");
var svg = document.getElementById("div#forSVG");
var svgWider = svg.innerHTML;
canvg(canvas, svgWider);
在我的脑海中,我建议检查"s"是什么。它实际上可能不是字符串,所以执行"s.substr(0,1)"将是错误中引用的"未定义"。
相关文章:
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 在JavaScript中输出转义字符
- 如何在jQuery中将函数的输出分配给变量
- Javascript,输出结果后页面不断刷新
- Datetime格式为Friendly Time.Moment JS输出错误
- 如何将angularjs中的javascript字符串输出为循环数组
- HTML5FileReader输出到D3.js图表
- console.log以外的Javascript输出函数
- IE9的HTML5 Canvas getImageData()函数存在问题
- Eloquent JavaScript递归示例如何终止为返回1,但仍然输出指数值
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- PHP中的数组输出
- 以不同的顺序输出数据
- 使用Rivets.js输出类
- 在Chrome扩展内部输出Google API调用
- 如何为d3.js图表输出组织/嵌套数据
- 将IndexedDB中的数据拉入数组,并通过ReactJS输出
- 一个ajax循环有两个输出错误innerHTML
- Javascript Image Canvas 返回数据和输出
- Canvg|将SVG转换为Canvas以输出为图像