相关疑难解决方法(0)

为了正确回答这个问题,我想我会:

1. 将文档内SVG文件转换为数据URL
2. 加载到 <img>
3. 把它绘制<img>成一个<canvas>
4. 将其转换<canvas>为PNG数据URL
5. 将该数据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;");

我收到错误:Uncaught TypeError:无法调用setPropertynull的方法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 …