为了正确回答这个问题,我想我会:
<img>
<img>
成一个<canvas>
<canvas>
为PNG数据URL我在这里有一个例子:http:
//phrogz.net/SVG/svg_to_png.xhtml
在Firefox中,我(NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]
尝试在步骤3中将图像绘制到画布时得到.
为什么我在Firefox中出现此错误,或者我该如何解决它?
在Chrome中,SECURITY_ERR
当我尝试toDataURL()
在第4步中调用时,我收到异常.
为什么我会在Chrome中收到此错误,或者我该如何解决?
所述WHATWG规范指出的原点为"从一个数据中产生:在另一文献或在脚本中找到URL"的图象应是相同的文件.此测试中的所有数据均来自同一文档.
有没有人在创建d3.js可视化时尝试使用svg来绘制库?我已经尝试使用canvg.js和d3.js将svg从android 2.3应用程序webview中转换为canvas,但是当我调用时:
svg.selectAll(".axis")
.data(d3.range(angle.domain()[1]))
.enter().append("g")
.attr("class", "axis")
.attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })
.call(d3.svg.axis()
.scale(radius.copy().range([-5, -outerRadius]))
.ticks(5)
.orient("left"))
.append("text")
.attr("y",
function (d) {
if (window.innerWidth < 455){
console.log("innerWidth less than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
else {
console.log("innerWidth greater than 455: ",window.innerWidth);
return -(window.innerHeight * .33);
}
})
.attr("dy", ".71em")
.attr("text-anchor", "middle")
.text(function(d, i) { return capitalMeta[i]; })
.attr("style","font-size:12px;");
Run Code Online (Sandbox Code Playgroud)
我收到错误:Uncaught TypeError:无法调用setProperty
null的方法http://mbostock.github.com/d3/d3.js?2.5.0:1707
是某种无头浏览器应用程序,还是服务器端js解析器?有没有人遇到过这个?
我有一个SVG,我正在使用下面的JavaScript代码转换为PNG
$(".exportImageButton").on("click",function(){
var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var canvas = document.createElement( "canvas" );
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width * 3;
canvas.height = svgSize.height * 3;
canvas.style.width = svgSize.width;
canvas.style.height = svgSize.height;
var ctx = canvas.getContext( "2d" );
ctx.scale(3,3);
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgData))) );
img.onload = function() {
ctx.drawImage( img, 0, 0 );
var canvasdata = canvas.toDataURL("image/png",1);
var pngimg = '<img src="'+canvasdata+'">';
d3.select("#pngdataurl").html(pngimg);
var …
Run Code Online (Sandbox Code Playgroud)