Javascript 如何使用JQUERY下载img？

我有

。图像是用base64生成的，并且
src
包含以下字符串：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAACOCAYAAABg4BtLAAADgUlEQVR4Xu2czyt8URjGnyErWfgLWClLCUuxsmCDoijJwpo0GT+S/EhSFmyUErGQ2LBQFrJEmrKxmuIvsLRAo3vM+M5M3c6drnO/hs8s77n3zPu+zznP8z4zZyaWTqfT+gOvGIn+MpRB9JcBKhAF0RKtAEu3RIHzDTsworFYLG+SbEOVvV7YYP2v636ZkmhhZUA0s6RZugXmyPXeZY8GtWnsUfbop+5GTVLsUfZowRqAjCAjyMgpG8O6sC6s+1kBPmHIrATXdsxvfsgIMoKMIKO8NQAZOTYBsC6sC+vCurBubgVcyw6sC+vCurAurAvr5lTgu2QHeUFekBfkBXlBXpCXfxUoVl/RUXQUHUVH0VF0FB1FR78qwBkGn9aI370UFoZjrI6/waap9ykw7gX3gnvBveBecC+4F9wL7sWvI8pex73gXjIV4OcgmUIUa6++637cC+4F94J7wb3gXnAvuBfcC+4l25LSGdEZ0RnRGdEZ0RnRGdEZ0RnRGfmsAY7fcPymRP9FzsZqP3088LdpPz0RW3wkaqtQqY2DaKkhZosXRG0VKnb88fFRy8vLOj4+1uvrqzo6OjQ5OamGhgYVdl3Fzh3k/kgQfXh40PDwsK6vr/Niqqmp0e7urlpbW4PEGuoe54m+vLxobGxM5+fnWlxcVE9Pj8rKynR0dKSZmRk1Nzdra2tL1dXVoRKxPew80fv7e/X29hpE4/G4ysvLTUzv7+9aXV3VxsaGTk9P1djYaIs11LjzRA8PDw2iucm8vb3p8vJS09PTur291f7+vgYGBkIlYnvYeaLr6+tmH3oJ19XVKZlMam5uTmdnZ1+xeSSVSCRssYYad57owsKCLi4utLS0pO3tbe3t7amqqsos55GREbNP29vbNTs7GyoR28POE/UQHR8f/4qjs7NT8/PzRlZSqZT6+/sNQZU8ogcHBxocHFRTU5PRUQ89j3W9193dnbq6uuQVo6+vzwZKqHHniGaTmZiYMKSUe0LMS3Btbe13sO7z87NGR0d1c3Nj5KS7u9sgc3JyYuSmra1Nm5ubqqysDIWY7WHniHoBXF1daWhoSE9PT3nxtLS0aGdnR/X19bY4Q49Hkqh3EtSTlZWVFdMhVVRUGAKamppSbW1t6CSCTBBJokECcX0PibqucNTzg2jUFXf9fiDqusJRzw+iUVfc9fuBqOsKRz3/n0H0A2kqGPz1ouCnAAAAAElFTkSuQmCC

如何使用jquery下载此图像？

我正在尝试这样做：

$('#save_but').click(function() {
    var img = document.getElementById('barcode');
    img.src =$('#barcode').attr('src');
    window.location.href = img.src.replace('image/png', 'image/octet-stream');
});

文件正在下载，但我无法为其指定名称和格式（例如：img.png）。
您可以在a标记上使用下载属性

<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"><img src="data:image/jpeg;base64,/9j/4AAQSkZ..."/></a>



查看更多信息：
好的，这就是我问题的解决方案：

1） 下载此5kb插件：

2） 写


$（“#保存但”）。单击（函数（）{
下载（$（'#barcode'）.attr（'src'），“strcode.png”，“image/png”）；
});

在Chrome、FireFox、IE上工作。9+
HTML文件：

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;">
      <strong>Codepedia.info</strong><hr />
      <h3 style="color: #3e4b51;">
         Html to canvas, and canvas to proper image
      </h3>
      <p style="color: #3e4b51;">
      <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net,C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, Web Design, Software
      </p>
      <p style="color: #3e4b51;">
      <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the user's browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.
      </p>
</div>

<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<div id="previewImage" style="display: none;">
</div>


Codepedia.info

Html到画布，画布到正确的图像

Codepedia.info是一个编程博客。教程主要介绍ASP.Net、C#、jQuery、AngularJs、Gridview、MVC、Ajax、Javascript、XML、MS SQL Server、NodeJs、Web设计和软件编程


html2canvas脚本允许您直接在用户浏览器上拍摄网页或其部分的“屏幕截图”。屏幕截图是基于DOM的，因此可能无法100%精确到真实的表示形式。




在脚本标记内：

<script>
    $(document).ready(function () {
       var element = $("#html-content-holder"); // global variable
       var getCanvas; // global variable

         html2canvas(element, {
             onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                   getCanvas = canvas;
                }
             });

         $("#btn-Convert-Html2Image").on('click', function () {
           var imgageData = getCanvas.toDataURL("image/png");
           // Now browser starts downloading it instead of just showing it
           var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
           $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
           });
         });

 </script>


$（文档）.ready（函数（）{
var元素=$（“#html内容持有者”）；//全局变量
var getCanvas；//全局变量
html2canvas（元素{
onrendered：函数（画布）{
$（“#预览图像”）.append（画布）；
getCanvas=canvas；
}
});
$（“#btn-Convert-Html2Image”）。在（'click'，函数（）{
var imgageData=getCanvas.toDataURL（“image/png”）；
//现在浏览器开始下载它，而不是仅仅显示它
var newData=imgageData.replace（/^data:image\/png/，“data:application/octet stream”）；
$（“#btn-Convert-Html2Image”）.attr（“下载”、“你的图片名.png”）.attr（“href”，newData）；
});
});
看看FileSaver.js：ie的哪个版本？使用ie版本的用户。9+不起作用，第一个属性应该是blob或二进制数据URL
<script>
    $(document).ready(function () {
       var element = $("#html-content-holder"); // global variable
       var getCanvas; // global variable

         html2canvas(element, {
             onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                   getCanvas = canvas;
                }
             });

         $("#btn-Convert-Html2Image").on('click', function () {
           var imgageData = getCanvas.toDataURL("image/png");
           // Now browser starts downloading it instead of just showing it
           var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
           $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
           });
         });

 </script>