个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我在 SVG 中有一个复杂的交互式图形。我想将 SVG 转换为隐藏 Canvas ，这样我就可以允许用户输出为 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);
关于javascript - 取消 |将 SVG 转换为 Canvas 以输出为图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34047541/
24
4
0
是否可以使用标准输入/标准输出在 bash 中压缩/解压缩字符串？ 我试过了，但显然不支持它？ hey=$(echo "hello world" | gzip -cf) echo $hey # ret
我的任务是让一个企业网站适用于 IE7，它必须“足够好”，因此我禁用了任何导致问题的花哨/非必要功能。 其中之一是正在使用的搜索栏，需要进行哪些搜索，我猜测幕后某个地方有某种 JavaScript 用
我有一个执行大量处理的小程序。您可以通过按回车键打印进度。 我实现它的方法是在主线程中完成处理，同时我有一个 pthread 不断循环 getchar() 以等待输入键。 问题是当我完成处理时。发生这
我完全理解 suspendCoroutine 与 suspendCancellableCoroutine 在我的示例中的工作方式。但我想知道为什么 println("I finished") (第 1
我是 QT 的新手。目前在我的项目中我实现了 QFileDialog . 在我的用例中:每当用户选择一个文本文件时，它都会执行 functionA .但是，我发现如果在文件对话框中单击取消，funct
我有代码，仅在用户选择“另存为”时运行。为此并获取我正在使用的文件的新名称 Application.GetSaveAsFilename功能。 我遇到的问题是类型不匹配，同时检查用户是否在他没有这样做时
我的 UILocalNotification 有问题。 我正在用我的方法安排通知。 - (void) sendNewNoteLocalReminder:(NSDate *)date alrt:(NS
祝你有美好的一天 我有一个网站，其中有很多“工具提示”。这些工具提示是在将鼠标悬停在文本的特定部分上时创建的。工具提示是一个 div block ，它显示在网站上所有其他内容的顶部，并且当光标从文本移
我遇到以下问题。每隔 2 秒，程序就会进入 if 语句。在这个 if 语句中，我想要一个计时器，它会在 15 秒后给我一条消息。计时器应延迟 1 秒运行。但是当我用计时器“等待”时，if 语句将再执行
基本上我有以下代码片段， (let [task (FutureTask. fn) thr (Thread. task)] (.start thr) ;;wait for signa
取消正在进行的 ASIHttpRequest 请求的正确位置在哪里？这就是我取消的方式，但是当我 时它继续崩溃在不让请求完成的情况下从一个 View Controller 转移到另一个 View Co
我在我的 winforms 应用程序中使用 BackgroundWorker 来执行另一个类中发生的长时间运行的任务(执行数据库操作)。由于所有工作都是在另一个类中完成的，因此取消并不那么简单。我在另
我正在使用 OneSignal 向我的用户显示通知。通知工作正常，但我注意到，如果我在通知栏中“滑动”取消通知，则通知将永远保留，这是一张显示应用程序图标上的通知的图像，我想在应用程序已打开: 我看到
正在运行的 AsyncTask 的 .cancel(boolean) 方法如何工作？这是文档: Attempts to cancel execution of this task. This atte
我注意到，当我激活约束时，我会立即在该行代码处收到一条警告，指出不能同时满足约束。 我假设布局是在“UI 更新周期”之类的稍后时间点计算的，而不是每次约束都被(取消)激活。因此，在(取消)激活约束的代
这是我创建线程的方式: readFromWebThread = [[NSThread alloc] initWithTarget:self selector:@selector(loadThread:
我目前正在尝试取消与我的数据模型中的对象关联的特定 UILocalNotifications。为此，每个数据对象都有一个唯一标识符，即 NSUUID。 创建 UILocalNotification:
当我提交并单击“确定”时，它会继续，但当我按“取消”时，它仍然会提交。我尝试使用此代码，但提交和取消按钮仍然执行相同的操作。 model.saveForm = function() { var
我有一个警报弹出窗口，当发生特定操作时会出现该弹出窗口。 5 秒后，使用 setTimeout() 隐藏警报弹出窗口。 我遇到的问题是，如果我多次触发弹出窗口，有时后续的弹出窗口会出现但立即消失。我相
我有一些 javascipt (jQuery)，其中单击按钮时会淡入 #myDiv，然后使用超时函数在 5 秒后再次淡出。它工作正常，但如果用户在超时内的 fadeOut 函数运行之前再次单击该按钮，
我是一名优秀的程序员,十分优秀！