0
我在SVG中有复杂的交互式图形。我想把SVG变成一个隐藏的画布，这样我可以让用户输出为png/pdf。Canvg |将SVG转换为画布以输出为图像
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（画布，SVG）我觉得s是我进入了SVG变量（选是可选的）。 Console.logging（typeof svg）返回对象。
首先60行canvg.js的：编辑
/*
* canvg.js - Javascript SVG parser and renderer on Canvas
* MIT Licensed
* Gabe Lerner (gabel[email protected])
* 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);
}
}
END
谁能发现我做了什么错？变量svg在查找已动态创建的div和svg时没有任何问题（它们正在正确记录到控制台）。 谢谢
如果问题发生在canvg.js：50附近，那么我建议发布canvg.js。当没有什么可看的时候，很难帮助诊断问题。 – Teeeeeeeeeeeeeeeeeeeeeeeeeeeej