Javascript 合并两个脚本在所有浏览器上保存google图表时出现问题_Javascript_Html_Google Visualization

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

javascript html google-visualization

Javascript 合并两个脚本在所有浏览器上保存google图表时出现问题,javascript,html,google-visualization,Javascript,Html,Google Visualization,我一直在尝试结合两个单独教程中的脚本来转换和保存谷歌图表。此处的教程：不再有效，但我使用此处的建议开始工作（仅适用于chrome，其他浏览器不支持），因此我使用本教程从画布保存png图像并适用于所有浏览器。我很难将二者结合起来，现在可能要倒退了，哈哈。这是不起作用的代码，任何帮助都将不胜感激 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></

我一直在尝试结合两个单独教程中的脚本来转换和保存谷歌图表。此处的教程：不再有效，但我使用此处的建议开始工作（仅适用于chrome，其他浏览器不支持），因此我使用本教程从画布保存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>


函数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(
“风格”，
'位置：绝对；'+
'顶部：'+（-chartArea.offsetHeight*2）+'px；'+
'左：'+（-chartArea.offsetWidth*2）+'px；'；
doc.body.appendChild（画布）；
canvg（canvas，svg）；
var imgData=canvas.toDataURL（“image/png”）；
canvas.parentNode.removeChild（canvas）；
返回imgData；
}
函数saveAsImg（chartContainer）{
var imgData=getImgData（chartContainer）；
//替换mime类型将强制浏览器触发下载
//而不是在浏览器窗口中显示图像。
window.location=imgData.replace（“image/png”、“image/octet-stream”）；
}
函数画布保护程序（url）{
this.url=url；
this.savePNG=函数（canvas，fname）{
如果（！canvas | |！url）返回；
fname=fname | |“图片”；
var data=canvas.toDataURL（“image/png”）；
data=data.substr（data.indexOf（'，'）+1.toString（）；
var dataInput=document.createElement（“输入”）；
setAttribute（“名称”，“imgdata”）；
dataInput.setAttribute（“值”，数据）；
var nameInput=document.createElement（“输入”）；
setAttribute（“名称”，“名称”）；
setAttribute（“value”，fname+'.png'）；
var myForm=document.createElement（“表单”）；
myForm.method='post'；
myForm.action=url；
appendChild（数据输入）；
appendChild（nameInput）；
document.body.appendChild（myForm）；
myForm.submit（）；
document.body.removeChild（myForm）；
};
this.generateButton=函数（标签、画布、fname）{
var btn=document.createElement（'button'），scope=this；
btn.innerHTML=标签；
btn.style['class']='canvassaver'；
addEventListener（'click'，function（）{scope.savePNG（canvas，fname）；}，false）；
文件.正文.附件（btn）；
返回btn；
};
}
函数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）；
}
var cs=新的画布保护程序（'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）；
load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
//饼图
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Task'）；
data.addColumn（'数字'，'每天小时'）；
数据。添加行（5）；
data.setValue（0,0，'工作'）；
数据设置值（0,1,11）；
data.setValue（1,0，'Eat'）；
数据设置值（1,1,2）；
设置值（2，0，'通勤'）；
数据设置值（2,1,2）；
data.setValue（3,0，‘看电视’）；
数据设置值（3,1,2）；
data.setValue（4,0，'Sleep'）；
数据设置值（4,1,7）；
var chart=new google.visualization.PieChart（document.getElementById（'google\u visualization\u div'）；
绘制图表（数据，{宽：450，高：300，标题：'我的日常活动'}）；
}
转换为图像
另存为PNG图像

图像将放在这里

这是我开始更改之前的两个原始脚本。这一款只能在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>


函数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(
“风格”，
'位置：绝对；'+
'顶部：'+（-chartArea.offsetHeight*2）+'px；'+
'左：'+（-chartArea.offsetWidth*2）+'px；'；
doc.body.appendChild（画布）；
canvg（canvas，svg）；
var imgData=canvas.toDataURL（“image/png”）；
canvas.parentNode.removeChild（canvas）；
返回imgData；
}
函数saveAsImg（chartContainer）{
var imgData=getImgData（chartContainer）；
//替换mime类型将强制浏览器触发下载
//而不是在浏览器窗口中显示图像。
window.location=imgData.replace（“image/png”、“image/octet-stream”）；
}
函数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）；
}
load（“可视化”、“1”、{packages:[“corechart”]}）；
古格尔
<!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>

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

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

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);