jQuery 保存图像点击

jQuery Save Image Onclick

本文关键字：图像 保存 jQuery      更新时间：2023-09-26

在我的网站上，我有一个jQuery脚本，如果单击下载按钮，它将在新窗口中打开您想要的图像。

我的问题是，当您单击图像将自动保存并且不会在新窗口中打开的按钮时，我如何制作此脚本。

我的代码 ：

<script type="text/javascript">
        $(document).ready(function (){
            $('#download-btn').click(function(){
                var size = $('#size').val();                
                window.open(size);
            });
        })
    </script>

首先我尝试jqueryfiledonwloader，但不适用于图像文件，经过一些搜索，我找到了下面的解决方案，这对我很有用，试试这个

 <script type="text/javascript">
        $(document).ready(function (){
            $('#download-btn').click(function(){
     var link = document.createElement('a');
                  link.href = '/sites/default/files/toy/jpeg/image-1419683919_4851.jpeg';  // use realtive url 
                  link.download = 'MyToy.jpeg';
                  document.body.appendChild(link);
                  link.click();     
           });
        })
    </script>


<button class="btn btn-success" style="width: 250px;" data-image="/media/result/online_resultjpg_Page68.jpg" data-exam="GMO" data-roll="110211" onclick="downloadCertificate(this);" >Download Certificate</button>
<script type="text/javascript">
function downloadCertificate(obj){
    var link = document.createElement('a');
    const image = $(obj).data("image");
    const img_ext = image.split(".");
    const ext = img_ext[img_ext.length - 1];
    link.href = image;
    link.download = $(obj).data("exam") + "_" + $(obj).data("roll") + ext;
    document.body.appendChild(link);
    link.click();
}
</script>

Yuseferi 脚本解决方案可以转换为我们在#download-btn关闭之前放置的简单锚标记：

<a href='/sites/default/files/toy/jpeg/image-1419683919_4851.jpeg'
   download='MyToy.jpeg'>MyToy.jpeg</a>

顺便说一下，download是一个标准的HTML5锚标签（MDN）属性，在脚本中，它被标记为"实验性"：可能是因为不必要的副作用。仍然尤塞菲里解决方案应该是完全证明的。

相关文章：