Сохранить созданное изображение на стороне клиента Нажмите кнопку

Question

У меня есть IgniteUI igDataChart, который я хотел бы сохранить на диск в качестве изображения. Вы не можете щелкнуть правой кнопкой мыши на диаграмме и сохранить изображение, потому что оно использует несколько холстов. Однако диаграмма имеет метод export image, который получит весь графический файл и вернет его в переменную javascript.

Я хотел бы автоматически сохранить этот файл в папке загрузки пользователя при нажатии кнопки. Если бы это было изображение на стороне сервера, я мог просто направить пользователя на соответствующий URL-адрес, но это не так.

Как пользователь может загрузить эту клиентскую сторону, сгенерированную png-изображение диаграммы нажатием кнопки? Мне нужно решение для кроссбраузеров.

JSFIDDLE

$(function() { 
    $("#exportBtn").click(function(){ 
     //returns an image DOM element; 
     var pngImage = $("#chart").igDataChart("exportImage"); 
     //now i need to download the image 
    }); 
}); 

Answer 1

Это решение обеспечивает более browser support и могут быть назначены на кнопки. http://jsfiddle.net/koo2hv5t/7/

1. Проверить блоб поддержки (вы можете добавить сообщение для старых браузеров или на стороне сервера запасной вариант)
2. Дождитесь анимации конец
3. Скопируйте диаграммы в формат dataURL с igDataChart
4. Преобразовать в сгустка с Util.dataURLToBlob из https://github.com/ebidel/filer.js

5. Сохранить блоб в файл с saveAs от https://github.com/eligrey/FileSaver.js

   //check support 
   try { 
       var isFileSaverSupported = !! new Blob; 
   } catch (e) {} 
   
   setTimeout(function() { 
       //add data to url 
       function downloadCanvas(link, canv, filename) { 
        if (isFileSaverSupported) { 
         saveAs(Util.dataURLToBlob(canv.src), filename); 
        } 
       } 
       $("#exportBtn").click(function() { 
        downloadCanvas(this, $("#chart").igDataChart("exportImage", 800, 600), 'test.png'); 
       }); 
   }, 1000); //wait till animation end 
   

Answer 2

Вы можете продолжить следующим образом:

1. Подождите до конца анимации
2. Копировать все полотно в прошлом один

3. Присвоить данные в URL (не кнопка)

   setTimeout(function() { 
       var c = $("#chart canvas"); //get handle to all canvas 
       var ctx = c[c.length - 1].getContext('2d'); 
       for (i = 0; i < c.length - 1; i++) { //add all canvas to the last one 
        ctx.drawImage(c[i], 0, 0); 
       } 
       for (i = 0; i < c.length - 1; i++) { //remove the duplicates 
        c[i].remove(); 
       } 
       //add data to url 
       function downloadCanvas(link, canv, filename) { 
        link.href = canv.toDataURL(); 
        link.download = filename; 
       } 
       $("#dl1").click(function() { 
        downloadCanvas(this, c[2], 'test.png'); 
       }); 
   
   }, 1000); //wait till animation end 
   

http://jsfiddle.net/koo2hv5t/1/