结合两个脚本以在所有浏览器上保存谷歌图表的问题

时间：2013-09-06 08:43:14

标签： javascript html google-visualization

我一直在尝试合并来自单独教程的两个脚本来转换和保存谷歌图表。这里的教程：http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html不再有用，但我使用了这里的建议来开始工作（仅适用于chrome，不受其他浏览器支持）所以我使用了本教程http://greenethumb.com/article/1429/user-friendly-image-saving-from-the-canvas/来保存png图像从画布，适用于所有浏览器。我很难将两者结合起来，现在可能会倒退了。这是非工作代码，任何帮助将不胜感激。 

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>


    <div>   
        <div id="saveexample"></div>

        <canvas id="drawhere_cicles3" style="border: 1px solid #ccc"
            height="350" width="610"></canvas>

    </div>


<script>

  function getImgData(chartContainer) {

    var canvas = document.getElementById('drawhere_cicles3');
    var context = canvas.getContext('2d');



    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 CanvasSaver(url) {

    this.url = url;

    this.savePNG = function(canvas, fname) {
        if(!canvas || !url) return;
        fname = fname || 'picture';

        var data = canvas.toDataURL("image/png");
        data = data.substr(data.indexOf(',') + 1).toString();

        var dataInput = document.createElement("input") ;
        dataInput.setAttribute("name", 'imgdata') ;
        dataInput.setAttribute("value", data);

        var nameInput = document.createElement("input") ;
        nameInput.setAttribute("name", 'name') ;
        nameInput.setAttribute("value", fname + '.png');

        var myForm = document.createElement("form");
        myForm.method = 'post';
        myForm.action = url;
        myForm.appendChild(dataInput);
        myForm.appendChild(nameInput);

        document.body.appendChild(myForm) ;
        myForm.submit() ;
        document.body.removeChild(myForm) ;
    };

    this.generateButton = function (label, canvas, fname) {
        var btn = document.createElement('button'), scope = this;
        btn.innerHTML = label;
        btn.style['class'] = 'canvassaver';
        btn.addEventListener('click', function(){scope.savePNG(canvas, fname);}, false);

        document.body.appendChild(btn);

        return btn;
    };
}

  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);
  }
</script>

<script>
    var cs = new CanvasSaver('http://greenethumb.com/canvas/lib/saveme.php');
    var canvas = document.getElementById('drawhere_cicles3');
    var btn = cs.generateButton('save an image!', canvas, 'myimage');
    document.getElementById('saveexample').appendChild(btn);
</script>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  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('google_visualization_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>
</head>
<body>
<div id="google_visualization_div"></div>

<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>
<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>

<hr>
<div id="img_div">
  Image will be placed here
</div>
</body>
</html>

这是我开始更改之前的两个原始脚本。这个只适用于chrome。

   <html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
<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);
  }
</script>

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  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('google_visualization_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>
</head>
<body>
<div id="google_visualization_div"></div>

<button onclick="saveAsImg(document.getElementById('google_visualization_div'));">Save as PNG Image</button>
<button onclick="toImg(document.getElementById('google_visualization_div'), document.getElementById('img_div'));">Convert to image</button>

<hr>
<div id="img_div">
  Image will be placed here
</div>
</body>
</html>

这个适用于所有浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>

<p>CanvasSaver in a project:</p>


        <p>working demo: </p>

    <div>   
        <div id="saveexample"></div>
        <canvas id="drawhere_cicles3" style="border: 1px solid #ccc"
            height="350" width="610"></canvas>

    </div>




    <script>

(function(){
    var canvas = document.getElementById('drawhere_cicles3');
    var context = canvas.getContext('2d');

      // begin custom shape
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.strokeStyle = 'blue';
      context.stroke();



})();
</script>



    <script>        
function CanvasSaver(url) {
        this.url = url;
        this.savePNG = function(canvas, fname) {
        if(!canvas || !url) return;
        fname = fname || 'picture';
        var data = canvas.toDataURL("image/png");
        data = data.substr(data.indexOf(',') + 1).toString();
        var dataInput = document.createElement("input") ;
        dataInput.setAttribute("name", 'imgdata') ;
        dataInput.setAttribute("value", data);
        var nameInput = document.createElement("input") ;
        nameInput.setAttribute("name", 'name') ;
        nameInput.setAttribute("value", fname + '.png');
        var myForm = document.createElement("form");
        myForm.method = 'post';
        myForm.action = url;
        myForm.appendChild(dataInput);
        myForm.appendChild(nameInput);
        document.body.appendChild(myForm) ;
        myForm.submit() ;
        document.body.removeChild(myForm) ;
        };

    this.generateButton = function (label, canvas, fname) {
    var btn = document.createElement('button'), scope = this;
    btn.innerHTML = label;
    btn.style['class'] = 'canvassaver';
    btn.addEventListener('click', function(){scope.savePNG(canvas, fname);}, false);
    document.body.appendChild(btn);
    return btn;
    };
}
</script>

<script>
    var cs = new CanvasSaver('/examples/canvassaver/saveme.php');
    var canvas = document.getElementById('drawhere_cicles3');
    var btn = cs.generateButton('save an image!', canvas, 'myimage');
    document.getElementById('saveexample').appendChild(btn);
</script>







</body>

</html>

我已经尝试了@asgallant的建议，但我遇到了其他问题（可能很简单）我补充道     .getElementByTagName（ 'SVG'）[0] .parentNode; 但随后“保存”按钮消失了。然后我添加了建议的chartdiv（google_visualization_div）以及画布ID和第一个函数，但谷歌图表随后消失了。这是我的代码。谢谢你的帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript"
    src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript"
    src="https://canvg.googlecode.com/svn-history/r157/trunk/canvg.js"></script>
<head>

    <p>Here is an example of implementing the CanvasSaver in a project:</p>
    <div>
        <br>working demo: <br>
        <div id="saveexample">
            <canvas id="google_visualization_div" style="border: 1px solid #ccc"
                height="350" width="610"></canvas>
        </div>

        <script>

(function(){
    var cnvs = document.getElementById('google_visualization_div');
    var cx = cnvs.getContext('2d');

      // begin custom shape
      cx.beginPath();
      cx.moveTo(170, 80);
      cx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      cx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      cx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      cx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      cx.bezierCurveTo(320, 5, 250, 20, 250, 50);
      cx.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
      cx.closePath();
      cx.lineWidth = 5;
      cx.fillStyle = '#8ED6FF';
      cx.fill();
      cx.strokeStyle = 'blue';
      cx.stroke();
})();
</script>


        <br>
        <script>        
function CanvasSaver(url) {
        this.url = url;
        this.savePNG = function(cnvs, fname) {
        if(!cnvs || !url) return;
        fname = fname || 'picture';
        var data = cnvs.toDataURL("image/png");
        data = data.substr(data.indexOf(',') + 1).toString();
        var dataInput = document.createElement("input") ;
        dataInput.setAttribute("name", 'imgdata') ;
        dataInput.setAttribute("value", data);
        var nameInput = document.createElement("input") ;
        nameInput.setAttribute("name", 'name') ;
        nameInput.setAttribute("value", fname + '.png');
        var myForm = document.createElement("form");
        myForm.method = 'post';
        myForm.action = url;
        myForm.appendChild(dataInput);
        myForm.appendChild(nameInput);
        document.body.appendChild(myForm) ;
        myForm.submit() ;
        document.body.removeChild(myForm) ;
        };

    this.generateButton = function (label, cnvs, fname) {
    var btn = document.createElement('button'), scope = this;
    btn.innerHTML = label;
    btn.style['class'] = 'canvassaver';
    btn.addEventListener('click', function(){scope.savePNG(cnvs, fname);}, false);
    document.body.appendChild(btn);
    return btn;
    };
}
</script>
        <br>



<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  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('google_visualization_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>
        <script>
var cs = new CanvasSaver('http://greenethumb.com/canvas/lib/saveme.php');
var cnvs = document.getElementById('google_visualization_div').getElementByTagName('svg')[0].parentNode;
var btn = cs.generateButton('save an image!', cnvs, 'myimage');
document.getElementById('saveexample').appendChild(btn);
</script>
</head>


<body><div id="google_visualization_div"></div></body>
</html>

1 个答案:

答案 0 :(得分：0)

如果您使用的是第二个跨浏览器解决方案（并且具有服务器端代码），那么您不需要第一个仅限Chrome的解决方案。获取示例代码并修改以下行：

var cs = new CanvasSaver('/examples/canvassaver/saveme.php');
var canvas = document.getElementById('drawhere_cicles3');
var btn = cs.generateButton('save an image!', canvas, 'myimage');
document.getElementById('saveexample').appendChild(btn);
像这样：

var cs = new CanvasSaver(saveURL);
var canvas = document.getElementById(chartDiv).getElementsByTagName('svg')[0].parentNode;
var btn = cs.generateButton('save an image!', canvas, 'myimage');
document.getElementById(buttonContainer).appendChild(btn);

其中saveURL是保存脚本的网址，chartDiv是图表div的ID，buttonContainer是要添加按钮的容器的ID。

相关问题
最新问题