如何通过弹出另存为窗口将kendoui dataviz图表导出为（.png）或（.jpg）图像格式？

Question

我正在使用kendoui dataviz图表，我需要将这些图表导出为（.png）或（.jpg）图像格式。 基本上kendoui的dataviz图表有一个内置的方法'svg（）'。

'svg（）'返回当前图表的SVG表示。返回的字符串是一个独立的SVG文档。

例

var chart = $("#chart").data("kendoChart"); 
var svgText = chart.svg();

现在 svgText包含图表image..can人的细节告诉我如何将这些数据转换为实际的图像格式，并弹出一个 另存为提示???

代码示例：我想这一点，但它并没有提示任何 '另存为' 弹出

 <div id="example" class="k-content"> 
       <div class="chart-wrapper"> 
        <div id="chart"></div> 
        <center> 
         <div> 
          <input type="button" value="click" onclick="disp();" /> 
         </div> 
        </center> 
        <div> 
     <canvas id="canvas"></canvas> 
     </div> 
     </div> 
      </div> 


      <script type="text/javascript"> 

      function disp() { 
       var chart = $("#chart").data("kendoChart"); 
       var svgText = chart.svg(); 
       var c = document.getElementById('canvas'); 
       canvg(c,svgText); 
       var img = c.toDataURL("image/png"); 
       document.write('<img src="' + img + '"/>'); 
       window.win = open(imgOrURL); 
       setTimeout('win.document.execCommand("SaveAs")', 100); 
       } 

       function createChart() { 
       $("#chart").kendoChart({ 
        theme: $(document).data("kendoSkin") || "default", 
        title: { 
         text: "Internet Users" 
        }, 
        legend: { 
         position: "bottom" 
        }, 
        chartArea: { 
         background: "" 
        }, 
        seriesDefaults: { 
         type: "bar" 
        }, 
        series: [{ 
         name: "World", 
         data: [15.7, 16.7, 20, 23.5, 26.6] 
        }, { 
         name: "United States", 
         data: [67.96, 68.93, 75, 74, 78] 
        }], 
        valueAxis: { 
         labels: { 
          format: "{0}%" 
         } 
        }, 
        categoryAxis: { 
         categories: [2005, 2006, 2007, 2008, 2009] 
        }, 
        tooltip: { 
         visible: true, 
         format: "{0}%" 
        } 
       }); 
      } 

      $(document).ready(function() { 
       setTimeout(function() { 
        createChart(); 

       },100); 


       $(document).bind("kendo:skinChange", function (e) { 
        createChart(); 
        }); 
      }); 
    <script>      

Answer 1

更新2

图表现在包括各种导出选项 - PNG，SVG和矢量PDF。请参阅Export demo以供参考。

UPDATE

图表目前已经获得导出图像内置方法（base64编码）：

var img = chart.imageDataURL(); 

我不知道的一个跨浏览器的方式来显示“另存为”对话框。

参见：API Reference

原始响应如下：

导出图表图像浏览器是不可能的。我们准备了一个演示，演示如何使用Inkscape将SVG文档转换为服务器上的PNG/PDF。

演示应用程序在ASP.NET MVC中实现，但不依赖于它的任何功能，可以移植到其他框架。

您可以在GitHub上演示：

https://github.com/telerik/kendo-examples-asp-net/tree/master/chart-inkscape-export

Answer 2

U可以做到这样。 对于这种方法你需要svg.dll 你可以从这个链接下载。

• http://svg.codeplex.com/releases/view/18884

的Javascript：

var chart = $("#chart").data("kendoChart"); 
var svgString = escape(chart.svg()); 
    $.ajax({ 
     url: "/MyController/Sample", 
     data: { svg: svgString }, 
     async: false, 
     type: 'Post', 
     success: function (data) { 
      window.location = "/MyController/getPdf"; 
     } 
    }); 

控制器：

[HttpPost] 
    [ValidateInput(false)] 
    public void Sample(string svg) 
    { 
     var svgText = System.Web.HttpUtility.UrlDecode(svg); 
     Session["chrtData"] = svgText; 
    } 

    public void getPdf() 
    { 
     string svgText = Session["chrtData"].ToString(); 

     var byteArray = Encoding.ASCII.GetBytes(svgText); 
     using (var stream = new MemoryStream(byteArray)) 
     { 
      var svgDocument = Svg.SvgDocument.Open(stream); 
      //First Way 

      var bitmap = svgDocument.Draw(); 
      MemoryStream docMemStream = new MemoryStream(); 
      bitmap.Save("D:\\hi.png", System.Drawing.Imaging.ImageFormat.Png); 

     } 
    }