Javascript работает на jsfiddle, но не на localhost

Я пытаюсь преобразовать диаграмму Google в изображение. Я нашел прекрасный пример того, что мне нужно на jsfiddle (http://jsfiddle.net/SCjm8/32/), но как я вставить код на моем локальном хосте я получаю эту ошибку:Javascript работает на jsfiddle, но не на localhost

Uncaught ReferenceError: canvg is not defined

Почему это работает на jsfiddle, а не на моем локальном хосте?

Edit: Просто нужно добавить 3 внешних ресурсов jsfiddle, которые были расположены на левой стороне, будет знать это в будущем

источник

2013-05-19 Edgar

Вы сделали, конечно, также включает в себя 3 ресурсы, которые включены в скрипку, см. меню слева, где говорится «внешние ресурсы»? – adeneo

oh wow, я не знал, что: x спасибо, я думаю, что он будет работать сейчас – 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, но не на localhost

ответ

Смежные вопросы