как скачать картинку на клик с подтверждением по sweetalert?

Question

есть картинка так скачивается но только со второго клика и показывается 2 раза окно подтвержения Если сразу вставить ссылку и на клик по ней сразу показывается окно sweetalert и тут же перекрывает его картнка т.е открывается в браузере и ничего не скачивается

как сделать чтобы раз показать окно confirm, если да то скачать?

$('.coupon-download').on('click',function(){
        
        var el = $(this);
        var link = $(this).data('link-coupon');
        
        swal({
            title: "Download Coupon?",
            icon: "success",
            buttons: [true, "Ok!"],
            
          })
          .then((value) => {
            if (value) {
                el.attr('href', link);
                el.attr('download', 'download');
            }
            
            
          })
                
            
          
        
        
    });

@foreach($coupons as $coupon)
                <a data-link-coupon="{{ Voyager::image($coupon->image) }}" class="coupon-download">
                        <div class="col-md-4 col-sm-4">
                            <div class="mt-box m-b30">
                                <div class="mt-media">
                                    <img src="{{ Voyager::image($coupon->image) }}" alt="">
                                </div>
                            </div>
                        </div>
                </a>
                @endforeach

Answer 1

Вот, попробуй это:

$('.coupon-download').click(({currentTarget})=>{
    const url = $(currentTarget).attr('link-coupon');
    swal({
        title: 'Download Coupon?',
        icon: 'success',
        showCancelButton: true,
        confirmButtonColor: '#DC3545',
        cancelButtonColor: '#007BFF',
        confirmButtonText: 'Yes',
        cancelButtonText: 'No'
    }).then((r)=>{
        if(r && r.value){
            $(`<a href="${url}" download="file.png">`).appendTo('body').click().remove();
        }
    });
});

Вот это у меня сработало, только cors(из-за гугл пикчи) нужно выставить было:

const anImage = new Image();
anImage.crossOrigin = 'anonymous';
anImage.src = 'https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
anImage.onload = function(){
    const canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth;
    canvas.height = this.naturalHeight;
    canvas.getContext('2d').drawImage(this, 0, 0);
    const blob = canvas.toDataURL('image/png');
    $('body').html(`<a download="fileName.png" href="${blob}"><img src='' + blob + ''/></a>`);
};

БЛОГ НА HUSL

как скачать картинку на клик с подтверждением по sweetalert?

Ответы (1 шт):