Javascript在jsfiddle上工作，但不在本地主机上

我试图将谷歌图表转换为图像。我发现我需要上的jsfiddle（http://jsfiddle.net/SCjm8/32/）一个完美的例子，但正如我在我的本地我收到此错误的代码粘贴：Javascript在jsfiddle上工作，但不在本地主机上

Uncaught ReferenceError: canvg is not defined

为什么它的jsfiddle，而不是在我的本地工作？

编辑：只是需要从分别位于左侧是的jsfiddle添加3个外部资源，将在未来

来源

2013-05-19 Edgar

你做的，当然也包括包含在3个资源小提琴，看到左边的菜单，它说“外部资源”？ – adeneo

哦哇，我不知道：谢谢，我认为它现在会工作 – Edgar

的jsfiddle知道这允许用户添加引用外部资源。在上面的jsfiddle中有对canvg.js的引用。看看你的消息，看起来你缺少对这个文件的引用。要查看小提琴引用的所有外部引用，请展开外部资源并将这些引用添加到localhost文件中。

在你的jsfiddle，有三个外部JavaScript文件：

确保您和借鉴所有这些。

有关jsfiddle的更多信息，请访问documentation页面。

来源

2013-05-19 14:10:49

更多信息在这里 - https://code.google.com/p/canvg/ – x20mar

正如@Pitamber提到你需要添加这里convg库的详细信息 - https://code.google.com/p/canvg/

所以工作的例子是

<!-- 
To change this template, choose Tools | Templates 
and open the template in the editor. 
--> 
<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script> 
    <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
</head> 
<body> 
    <div id="img_div" style="position: fixed; top: 0; right: 0; z-index: 10; border: 1px solid #b9b9b9"> 
     Image will be placed here 
    </div> 

    <button onclick="saveAsImg(document.getElementById('pie_div'));">Save as PNG Image</button> 
    <button onclick="toImg(document.getElementById('pie_div'), document.getElementById('img_div'));">Convert to image</button> 
    <div id="pie_div"></div> 
</body> 
<script> 
     function getImgData(chartContainer) { 
      var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode; 
      var svg = chartArea.innerHTML; 
      var doc = chartContainer.ownerDocument; 
      var canvas = doc.createElement('canvas'); 
      canvas.setAttribute('width', chartArea.offsetWidth); 
      canvas.setAttribute('height', chartArea.offsetHeight); 


      canvas.setAttribute(
        'style', 
        'position: absolute; ' + 
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' + 
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;'); 
      doc.body.appendChild(canvas); 

      canvg(canvas, svg); 
      var imgData = canvas.toDataURL('image/png'); 
      canvas.parentNode.removeChild(canvas); 
      return imgData; 
     } 

     function saveAsImg(chartContainer) { 
      var imgData = getImgData(chartContainer); 

      // Replacing the mime-type will force the browser to trigger a download 
      // rather than displaying the image in the browser window. 
      window.location = imgData.replace('image/png', 'image/octet-stream'); 
     } 

     function toImg(chartContainer, imgContainer) { 
      var doc = chartContainer.ownerDocument; 
      var img = doc.createElement('img'); 
      img.src = getImgData(chartContainer); 

      while (imgContainer.firstChild) { 
       imgContainer.removeChild(imgContainer.firstChild); 
      } 
      imgContainer.appendChild(img); 
     } 

     google.load('visualization', '1', {packages: ['corechart', 'treemap', 'geochart']}); 

     google.setOnLoadCallback(drawChart); 

     function drawChart() { 
      // Pie chart 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Task'); 
      data.addColumn('number', 'Hours per Day'); 
      data.addRows(5); 
      data.setValue(0, 0, 'Work'); 
      data.setValue(0, 1, 11); 
      data.setValue(1, 0, 'Eat'); 
      data.setValue(1, 1, 2); 
      data.setValue(2, 0, 'Commute'); 
      data.setValue(2, 1, 2); 
      data.setValue(3, 0, 'Watch TV'); 
      data.setValue(3, 1, 2); 
      data.setValue(4, 0, 'Sleep'); 
      data.setValue(4, 1, 7); 

      var chart = new google.visualization.PieChart(document.getElementById('pie_div')); 
      chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'}); 

     } 
    </script> 
</html>

来源

2013-05-19 14:17:59 x20mar

Javascript在jsfiddle上工作，但不在本地主机上

回答

相关问题