堆栈内存溢出
  繁体   English   中英

结合两个脚本在所有浏览器上保存Google图表时出现问题

[英]problems combining two scripts to save a google chart on all browsers

 原文  2013-09-06 08:43:14  5   2    javascript/ html/ google-visualization

问题描述

我一直试图结合来自单独教程的两个脚本来转换和保存Google图表。 这里的教程： 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和第一个函数中添加了Google图表，但随后消失了。 这是我的代码。 谢谢你的帮助 

<!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>

2 个解决方案

解决方案1
 1  2013-09-06 10:47:31

据我了解，您有2种代码，一种适用于谷歌浏览器，另一种适用于所有其他浏览器，如何将它们组合在一起（如果没有，您可以编辑我的代码来满足您的需要），您可以尝试以下方法： 

<?PHP if($browser == "Chrome"){ ?>
<!--HTML Code for Chrome browser-->
<?PHP }else { ?>
<!--Code for other browsers-->
<?PHP } ?>

这将有助于跨浏览器脚本。

您可以通过以下链接获取$browser变量：

http://php.net/manual/zh/function.get-browser.php#101125

解决方案2
 0  2013-09-06 14:30:57

如果您使用的是第二个跨浏览器解决方案（并且已安装服务器端代码），则不需要任何第一个仅限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是保存脚本的URL， chartDiv是图表div的ID， buttonContainer是要将按钮附加到其上的容器的ID。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 合并Google表格中的两个脚本（JavaScript） 结合两个简单的脚本 在 Google Chart API 的数据表中组合两个 arrays 时出错 结合两个Javascript和jQuery脚本 页面有两个脚本。 一种可以在所有浏览器上运行。 IE7失败了。 使用Google脚本将日期和时间合并到DateTime中 将Google Chart保存为SVG？ 加载第三个Google图表时出现问题 Google图表问题（图表标题，轴文本） 如何使用Google脚本自定义图表的图例
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM