загрузить диаграмму в png с помощью canvas.toDataURL (), не работающей в IE и firefox

Question

Я использую canvas.toDataURL () для загрузки диаграммы chart.js, она отлично работает с Chrome, но не работает с IE и Firefox. Вот мой код

 var link = document.createElement('a');
  var canvas = document.getElementById('canvasId');
link.href = canvas.toDataURL("image/png");
link.download = 'IMAGE.png';
link.click();

Спасибо.

Answer 1

В Firefox вам нужно сделать link.click (хотя вы можете не захотеть делать это в Chrome, поскольку это приводит к двойной загрузке). Однако IE (за исключением последних версий Edge) не поддерживает атрибут «download» тега a, и вам нужно немного по-другому сохранить холст.

var canvas = document.getElementById('canvasId');
var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);
if (!isIE) {
    let image = canvas.toDataURL("image/jpeg", 1.0);

    // we are getting the a tag to add the 'download' attribute and the file contents
    let downloadLink = document.getElementById("download");
    downloadLink.setAttribute("download", downloadFileName);
    downloadLink.setAttribute("href", image);

    // For some reason, we need to click the button again in firefox for the download to happen
    if (navigator.userAgent.match(/Firefox/g)) {
        downloadLink.click();
    }
}

if (isIE) {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, downloadFileName);
}

Answer 2

В документации API Chart.js есть встроенная функция .toBase64Image (), которую вы, возможно, захотите использовать вместо этого, поскольку вы указали расширение файла как .png.

Как уже говорилось Бекки, в Firefox для загрузки файла необходимо использовать link.click () . Однако элемент, который мы создали ( link ), необходимо добавить в тело вашего HTML-документа, чтобы link.click () работал должным образом. Важно, чтобы после выполнения этого оператора удалил элемент ссылки из вашего HTML-документа, чтобы ваше HTML-тело не накапливало эти элементы каждый раз, когда вы пытаетесь загрузить диаграмму. IE требует, чтобы холст сохранялся по-другому с помощью функций BLOB-объектов.

let canvas = document.getElementById('canvasId');
let chart_name = = new Chart(canvas, config);

var isIE = !!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g);

if (!isIE) {

  // Create a hyperlink element.
  let link = document.createElement('a');

  // Set image URL and filename.
  link.href = chart_name.toBase64Image();
  link.download = 'IMAGE.png';

  // If browser is Firefox, the element we created above must be appended to the
  // body of the HTML document & therefore removed after.
  if (navigator.userAgent.match(/Firefox/g)) {
      document.body.append(link);  
      link.click();
      document.body.removeChild(link);
  }
}

if (isIE) {
  var blob = canvas.msToBlob();
  window.navigator.msSaveBlob(blob, 'IMAGE.png');
}

Answer 3

 var canvas = document.getElementById('canvasId');
 if(canvas.msToBlob){
     var blob = canvas.msToBlob();
     window.navigator.msSaveBlob(blob, 'image.png');
 }
 else{
       var link = document.createElement('a');
       link.href = canvas.toDataURL("image/png");
       link.download = 'IMAGE.png';
       document.body.append(link);
       link.click();
   }

Создаваемый вами тег привязки также необходимо добавить в DOM в Firefox и IE, чтобы его можно было распознать по событиям щелчка.