Save-Asウィンドウをポップアップすることで、kendoui datavizグラフを（.png）または（.jpg）形式にエクスポートする方法は？

Question

私はケンドーイデータヴィッツチャートを使用しており、これらのチャートを（.png）または（.jpg）イメージフォーマットにエクスポートする必要があります。 基本的にkendoui datavizチャートには、 'svg（）'という組み込みメソッドがあります。

'svg（）'現在のグラフのSVG表現を返します。返される文字列は、自己完結型のSVGドキュメントです。今

例

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

誰もがどのように実際の画像フォーマットにこれらのデータを変換し、プロンプトとして 保存をポップアップを教えimage..can svgTextは、チャートの詳細が含まれています???

コード例：私はこれを試してみましたが、それはどんな '名前を付けて保存' のポップアップを要求しません

 <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

UPDATE 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 Uが必要です。

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

     } 
    }