Javascript 适用于 jsfiddle 但不适用于 localhost答案

【问题标题】：Javascript works on jsfiddle but not on localhostJavascript 适用于 jsfiddle 但不适用于 localhost
【发布时间】：2013-05-19 22:18:40
【问题描述】：

我正在尝试将谷歌图表转换为图像。我在 jsfiddle (http://jsfiddle.net/SCjm8/32/) 上找到了我需要的一个完美示例，但是当我将代码粘贴到我的本地主机上时，我收到了这个错误：

Uncaught ReferenceError: canvg is not defined

为什么它在 jsfiddle 上运行，而不是在我的本地主机上运行？

编辑：只需要从左侧的jsfiddle添加3个外部资源，以后会知道这个

【问题讨论】：

您当然还包括了小提琴中包含的 3 个资源，请参阅左侧的菜单，其中显示“外部资源”？
哦，哇，我不知道 :x 谢谢，我想它现在可以工作了

标签： javascript

【解决方案1】：

jsfiddle 允许用户添加对外部资源的引用。在上面的 jsfiddle 中有对canvg.js 的引用。查看您的消息，您似乎缺少对该文件的引用。要查看 fiddle 引用的所有外部引用，请展开外部资源并将这些引用添加到您的 localhost 文件中。

在您的 jsfiddle 中，有三个外部 javascript 文件：

确保引用所有这些。

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

【讨论】：

【解决方案2】：

正如@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>

【讨论】：