HTML als Bild speichern unter Verwendung von HTML2CANVAS

Question

Ich habe HTML2CANVAS hinzugefügt, um eine Canvas zu speichern, die in einem div als Bild im PNG-Format enthalten ist. Es funktioniert gut in Chrome, aber nichts passiert passiert in IE 9, 10 oder 11. Ich habe Breakpoints in IE zu debuggen, aber keine Fehler werden jemals geworfen.

Mein Grund für das Umschließen der Zeichenfläche in einem Div bestand darin, die Legende mit dem Diagramm/Diagramm exportieren zu können, das im Canvas-Tag generiert wurde.

Ich verwende AngularJS, aber in diesem Fall wird nur ein Klickereignis verwendet.

Auch dies funktioniert in Chrome gut. In IE werden keine Fehler ausgelöst. Beim Debuggen geht es über Javascript und scheint jede Zeile entsprechend zu treffen. Ich habe die Datei html2canvas.js auf der Seite FYI hinzugefügt.

Ich habe das recherchiert und stieß auf einige Einträge, die sagen, dass IE Versprechungen nicht handhabt, und ich musste ein polyfill hinzufügen, um das zu kompensieren. Ich habe das getan und nichts ändert sich.

Dank

ist hier mein Code.

HTML

<div class="row"> 
    <div id="widget" class="col-md-12"> 
    <canvas id="lineChartCanvas" class="chart chart-line" chart-data="data" chart-labels="labels" style="height: 300px; width: 95%;" 
      chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 
    </div> 
</div> 

Button-Click-Ereignis

<input type="button" class="btn btn-primary" id="btnSave" ng-click="exportChart()" ng-show="isIEbrowser" value="EXPORT CHART"/> 

Javascript/Schräg

function exportChart() { 

    var canvasdiv = document.getElementById("widget"); 

    html2canvas(canvasdiv,{ 

     onrendered: function (canvas) { 
      var a = document.createElement("a"); 
      a.href = canvas.toDataURL("image/png"); 
      a.download = userContext.mrn + "_chart_" + datetime + ".png"; 
      a.click(); 
     } 
    }); 
} 

Answer 1

Verwenden Sie für IE den BlobBuilder, um den Canvas in ein Blob-Objekt zu konvertieren und als Bildstrom zu speichern.

Im Folgenden finden Sie einen Beispielcode, der ich in einem meiner Projekt verwendet haben:

if (navigator.msSaveBlob) { 
        var URL = window.URL; 
        var BlobBuilder = window.MSBlobBuilder; 
        navigator.saveBlob = navigator.msSaveBlob; 
        var imgBlob = canvas.msToBlob(); 
        if (BlobBuilder && navigator.saveBlob) { 
         var showSave = function (data, name, mimetype) { 
          var builder = new BlobBuilder(); 
          builder.append(data); 
          var blob = builder.getBlob(mimetype || "application/octet-stream"); 
          navigator.saveBlob(blob, name); 
         }; 

         showSave(imgBlob, fileName, "image/png"); 
        } 
       }