Всплывающее окно Sweet Alert перед загрузкой HTML-изображения Canvas в PNG

в моем приложении для рисования на холсте у меня есть кнопка загрузки в png, я хочу сделать так, чтобы изображение с холста загружалось только тогда, когда пользователь нажимает «да, сохранить» во всплывающем окне с милым предупреждением. Прямо сейчас он все еще загружается автоматически. Спасибо за помощь. (также, если бы у кого-то был лучший способ загрузки через Javascript, это тоже помогло бы, он загружает png, но он поврежден, и я не могу его открыть)

$('#download').click(function(){
    swal({
        title: "Are you finished your creation?",  
        text: "click yes to save",   
        type: "warning",  
        showCancelButton: true,   
        confirmButtonColor: "#f8c1D9",   
        confirmButtonText: "Yes, save it!",  
        closeOnConfirm: true 
    }, function (isConfirm) {      
        if (isConfirm) {
            swal("Saving!");

            var base64 = document.getElementById("canvas")
              .toDataURL("image/png")
              .replace(/^data:image\/[^;]/, 'data:application/octet-stream');

            document.getElementById("download-png").href = base64
        } else {

        }

        return false; 
    });
});

HTML

<div id="download">
    <a href="#" id="download-png" download="image.png"><img src="./assets/imgs/tools/save.png" /></a>
</div>

javascript jquery html5-canvas sweetalert
person Katie Sak    schedule 08.06.2016    source источник
comment
Просто: не используйте a[download] с самого начала. Создайте его с помощью javascript и вызовите событие щелчка на узле, когда пользователь подтвердит. Более простой альтернативой является использование FileSaver.js.   -  person Endless    schedule 09.06.2016
comment
То же самое относится к комментарию @Endless об использовании FileSaver.JS (или какого-либо другого сценария сохранения) вместо атрибута download, тем более что IE еще не поддерживает download.   -  person markE    schedule 09.06.2016
comment
Спасибо, @Endless, не могли бы вы знать, как я могу реорганизовать это выражение if else, чтобы всплывающее окно требовало от пользователя нажатия «да» перед его сохранением, что касается первой половины моего вопроса?   -  person Katie Sak    schedule 09.06.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны включить canvas-toBlob.js и FileSaver.js на свою страницу, а затем:

function (isConfirm) {      
    if (isConfirm) {
        swal("Saving!");

        var canvas = document.getElementById("canvas")

        // get the canvas as a blob
        canvas.toBlob(function(blob){
            // Save the file...
            saveAs(blob, 'my-image.png')
        }, "image/png", 0.95); // PNG at 95% quality
    } else {
        // user cancel
    }

    return false; 
};
person Endless    schedule 10.06.2016
comment
любые другие предложения, которые не требуют плагина? эти библиотеки не работают должным образом - person Katie Sak; 11.06.2016
comment
У меня это отлично работает, просто не поверил, что мне нужно было записать, как все сделать в рабочей демонстрации: jsfiddle.net/g2s0a2h8/1 - person Endless; 11.06.2016
comment
спасибо за ваши усилия в помощи мне! :) оказывается, это был порядок, в котором у меня были зависимости JS-файла, ваше решение действительно работает.. очень признателен - person Katie Sak; 13.06.2016