Сохранить сгенерированное на стороне клиента изображение при нажатии кнопки

У меня есть IgniteUI igDataChart, который я хочу сохранить на диск в виде изображения. Вы не можете щелкнуть правой кнопкой мыши на диаграмме и сохранить изображение, потому что оно использует несколько холстов. Однако на диаграмме есть метод экспортировать изображение, который получит всю диаграмму. изображение и вернуть его в переменную 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
    });
});

javascript jquery infragistics ignite-ui
person Brino    schedule 03.06.2015    source источник
comment
Вы должны поддерживать IE ‹ = 8? можно попробовать установить кнопку href в base64 изображения   -  person BillPull    schedule 03.06.2015
comment
stackoverflow.com/questions/3665115/   -  person BillPull    schedule 03.06.2015
comment
@BillPull нет, к счастью, мне не нужно поддерживать IE ‹= 8.   -  person Brino    schedule 04.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Это решение обеспечивает лучшую поддержку браузера и может быть назначено кнопке. 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
person kb_    schedule 04.06.2015
comment
это прекрасно работает. Вы могли бы просто обновить свой первый ответ, а не отправлять новый. - person Brino; 05.06.2015
comment
я проведу тест, чтобы убедиться, что он работает во всех случаях, а затем отмечу его как ответ - person Brino; 05.06.2015
comment
Filesaver.js имеет достойную поддержку браузера. Util.dataURLToBlob поддерживается только в Chrome, но, по-видимому, он также работает в IE, так что это, похоже, настолько хорошо, насколько я получу для кросс-браузерного решения, пока HTML 5 не будет полностью поддерживаться в IE. Спасибо за хорошую информацию и усилия. - person Brino; 10.06.2015

arrow_upward
1
arrow_downward

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

  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/

person kb_    schedule 03.06.2015
comment
Хорошая мысль о том, чтобы дождаться окончания анимации. Есть ли способ использовать это с методом exportImage? - person Brino; 04.06.2015
comment
Это прекрасно работает, но не в IE и не по нажатию кнопки. Атрибут загрузки довольно новый и еще не поддерживается в IE: w3schools.com/jsref/prop_anchor_download.asp. - person Brino; 04.06.2015
comment
Да, как я уже сказал, это только для URL-адресов, а IE имеет много ограничений, когда речь идет о функциях HTML5... Вероятно, это то, что вам нужно github.com/eligrey/FileSaver.js - person kb_; 04.06.2015
comment
Ok. Спасибо за вашу помощь до сих пор, я посмотрю на это. - person Brino; 04.06.2015