javascript - How to download img with JQUERY? - Stack Overflow

admin管理员组

文章数量:1295247

I have <img id="barcode"> and I need to download image from src. The image is generated with base64, and src contain this string:

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

How to download this image with jquery?
I m trying to do this:

$('#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');
});

File is downloading but I cannot assign name and format (example: img.png) to it.

I have <img id="barcode"> and I need to download image from src. The image is generated with base64, and src contain this string:

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

How to download this image with jquery?
I m trying to do this:

$('#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');
});

File is downloading but I cannot assign name and format (example: img.png) to it.

• javascript
• jquery
• html

Share Follow edited Jun 17, 2016 at 3:03 Bálint 4,04922 gold badges1717 silver badges2828 bronze badges asked Jun 16, 2016 at 7:42 Ivan IvanovIvan Ivanov 52522 gold badges55 silver badges2020 bronze badges 1

• Take a look at FileSaver.js: github./eligrey/FileSaver.js – Mike Scotty Commented Jun 16, 2016 at 7:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

you can use the download attribute on an a tag ...

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

see more: https://developer.mozilla/en/HTML/element/a#attr-download

Ok, that's solution for my problem:

1) Download this 5kb plugin: download.js

2) Write

<script>
$('#save_but').click(function() {
download($('#barcode').attr('src'),"strcode.png","image/png");
});
</script>

Working in Chrome, FireFox, IE ver. 9+

HTML File:

<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>

Inside the Script tag:

<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>

本文标签： javascriptHow to download img with JQUERYStack Overflow