Sweet Alert всплывающее окно с запросом перед загрузкой HTML-изображения холста в 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>
 Endless08 июн. 2016 г., 23:19
Просто: не используйтеa[download] с самого начала. Создайте его с помощью JavaScript и инициируйте событие щелчка на узле, когда пользователь подтвердит. Более простой альтернативой является использованиеFileSaver.js
 markE08 июн. 2016 г., 23:52
То же самое относится и к комментарию Endless об использовании FileSaver.JS (или другого сценария сохранения) вместоdownload атрибут - тем более что IE пока не поддерживаетdownload.
 Katie Sak09 июн. 2016 г., 01:25
Спасибо @Endless, знаете ли вы, как я мог бы реорганизовать это утверждение if else, чтобы всплывающее окно требовало от пользователя нажать «да», прежде чем оно сохранится, что касается первой половины моего вопроса?

Ответы на вопрос(1)

Решение Вопроса

Вы должны включитьхолст-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; 
};
 Katie Sak10 июн. 2016 г., 23:29
любые другие предложения, которые не требуют плагин? эти библиотеки не работают должным образом
 Katie Sak13 июн. 2016 г., 19:10
спасибо за ваши усилия, чтобы помочь мне! :) оказывается, это был порядок, в котором у меня были зависимости от моего файла JS, ваше решение работает .. очень ценится
 Endless11 июн. 2016 г., 16:26
Это прекрасно работает для меня, просто не верил, что мне нужно было записать, как сделать все в рабочей демонстрации:jsfiddle.net/g2s0a2h8/1

Ваш ответ на вопрос