与html2Canvas

我试图通过XSL创建dhtmlxChart导出到的图像，使人们可以将它保存导出dhtmlxChart。（出口到MS Excel失败）与html2Canvas

下图是建立正确和工作正常，所以我增加了一个按钮，“另存为PIC”应会产生从身体画布，并在新页面中打开它。

当我尝试运行它，它给出了一个错误： SCRIPT438：对象不支持属性或方法“的getComputedStyle” html2canvas.js，行2269字符5

这里是我的XSL代码：

<xsl:stylesheet version='2.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'> 
<xsl:decimal-format name="format" grouping-separator="." decimal-separator=","/> 

<!-- Declaratie variabelen --> 
<!-- Globale variabelen --> 
    <xsl:variable name="VarMaand"><xsl:value-of select="//rows/row[last()]/@Maand" /></xsl:variable> 
    <xsl:variable name="VarJaar"><xsl:value-of select="//rows/row[last()]/@Jaar" /></xsl:variable> 
<!-- Einde Declaratie variabelen --> 

    <xsl:template match="/"> 
     <html> 
      <style> 
       td { border:1px; 
         border-style:solid; 
         border-color:#000000; 
         height:20px; 
         text-align:center; 
        } 
      </style> 
      <head> 
       <script src="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.js" type="text/javascript"></script> 
       <link rel="STYLESHEET" type="text/css" href="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.css"/> 
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
       <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
       <script src="/LIB/JS/html2canvas.js" type="text/javascript"></script> 

      </head> 
      <body> 
       <script> 
        var chart; 
        window.onload = function() { 
         chart = new dhtmlXChart({ 
          view:"stackedBar", 
          container:"chart1", 
          value:"#Value1#", 
          width:10, 
         xAxis:{lines: false,template:function(obj, common, data){ 
           if (obj.Maand%2) 
           {if (obj.Maand &lt; 10) return "0"+obj.Maand+"/"+(obj.Jaar-2000); 
              return obj.Maand+"/"+(obj.Jaar-2000);} 
            return ""; 
          }}, 
          yAxis:{start:27000,step:500,end:37500}, 
          color:"#0070C0" 
         }); 
         chart.addSeries({value:"#Value2#",color:"#00B0F0"}); 
         chart.addSeries({value:"#Value3#",color:"#00B050"}); 
         chart.addSeries({value:"#Value4#",color:"#92D050"}); 
         chart.addSeries({value:"#Value5#",color:"#C3D69B"});   
         chart.addSeries({value:"#Value6#",color:"#D9D9D9"}); 
         chart.addSeries({value:"#Value7#",color:"#BFBFBF"}); 
         chart.addSeries({value:"#Value8#",color:"#7F7F7F"}); 
         chart.addSeries({view:"spline",item:{radius:0,type:"square",color:"#000000"},line:{color:"#000000",width:2},value:"#Value9#"}); 
         chart.load("../../../ProcessDescriptor/descriptor/L1/HRB/HRB_Foto_Grafiek_Data.xml",function(){},"xml") 
        } 

        function Capture() 
        { 
         html2canvas(document.body, { 
          logging:true, 
          onrendered: function(canvas) { 
          var img = canvas.toDataURL() 
           window.open(img); 
          } 
         }); 
        } 

       </script> 
       <div id="main" style="width:100%;height:100%;"> 
       <div id="Picture" style="width:20%;height:75%;float:left;text-align:center;"> 
         <br /><img src="/LIB/IMAGE/HRB/Divers/MindTheGap.png"/><br /><br /> 
         <button onclick="Capture()">Save as Pic</button> 
       </div>  
       <div id="chart1" style="width:75%;height:75%;float:right;font-family:sans-serif;"></div> 
       </div> 
      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

中仅有的日志我从html2canvas得到的是： LOG：html2canvas：预载启动：找到背景图像该日志条目之后，我得到上述错误消息。

有谁能告诉我为什么这不起作用？我试图在IE9中运行（由公司提供，无法更改）我应该在头部包含更多js吗？

感谢

来源

2014-09-05 user3354941

这是一个已知的问题与html2canvas.js和IE - 见html2canvas.js not Working in IE9/10/11。我刚刚检查了当前版本html2canvas on github，以防您可能使用的是旧版本，但他们至少仍有一行调用getComputedStyle。

的getComputedStyle用的问题是，该功能不会被几个IE版本支持，尽管例如caniuse表示，它只会被IE8支持 - caniuse getcomputedstyle。

下一个问题可能是IE9版本贵公司使用 - 你可以很容易地检查，如果是的getComputedStyle在那里工作，但由于发生错误，不这样想。所以我建议两种解决方法：如果你不使用当前版本的html2canvas.js，请检查它是否适用于你。如果没有，如上所述，函数NodeContainer.prototype.computedStyle中只有一行534行 - 调用此函数，它看起来像当前版本可能处理不支持getComputedStyle的情况。

如果当前html2canvas.js不会为你工作，你可以尝试添加修复这个缺失的功能。这里不会详细讨论，因为它可能已经解决了您的问题以更新到当前版本，但是如果您谷歌“为ie的getcomputedstyle”你会发现几个资源提供js-snippets为IE“添加”这个函数（=一个叫做getComputedStyle的函数，用于IE，被添加到窗口对象，并可能导致像原始功能）。虽然有些评论指出建议的修复程序不起作用，但是如果至少脚本在IE9上运行或者是否有其他问题，则可以检查。

来源

2014-09-06 19:48:33

嘿，感谢您的回答，我试图替换html2canvas.js文件，现在我没有得到错误“的getComputedStyle”。事实上，我什么都没有得到。它只是调用我的函数'capture（）'就是这样。我没有在新窗口中看到图像，但我也没有收到错误消息。我是否正确调用html2canvas？ – user3354941 2014-09-08 07:34:41

一些试验和错误已经知道我的页面正在进入怪异模式（如果它不在这种模式下，我的dhtmlx将不起作用），并且html2canvas似乎无法在怪癖模式下工作。如果我在正常模式下创建一个小页面来尝试html2canvas，它工作得很好。尽管如此，我仍然无法在新窗口中创建画布，但追加工作正常，在新窗口中它会打开一个新选项卡，就是这样... url是一个字符串64，但页面仍为空...即使长度只有2500个半左右。 – user3354941 2014-09-08 10:20:42

如果我找到你了，它现在（几乎）为你工作，如果是这样，很高兴听到:)。对于另一个问题 - 也许听起来很奇怪，但是你是否试图将它附加到实际的dom中（也许在第二步中作为隐藏的元素），并且在附加时，用这个元素打开一个新窗口？在这个问题上搜索了一下，在github中搜索了一下h2canvas的问题，但问题存在差异（例如，由于可以使用h2c params设置的跨域策略而没有显示img;不使用日志参数，因为它可能导致冲突+应仅用于测试;或计时问题等）。 – 2014-09-08 18:10:40

回答

相关问题