浏览器/ HTML从src =“data：image / jpeg; base64 …”强制下载图片
我在客户端生成一个图像，我用这样的HTML显示它：
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/> 我想提供下载生成的图像的可能性。
我怎么才能意识到，浏览器正在打开一个文件保存dialoge（或只是下载图像像铬或火狐到下载文件夹将做），这使得用户可以保存图像， 而不需要点击右键并保存为图像？
我更喜欢没有服务器交互的解决scheme。 所以我知道，如果我第一次上传图像，然后开始下载，将是可能的。
非常感谢！
只需用application/octet-streamreplaceimage/jpeg 。 客户端不会将URL识别为内联资源，并提示下载对话框。
一个简单的JavaScript解决scheme将是：
//var img = reference to image var url = img.src.replace(/^data:image\/[^;]+/, 'data:application/octet-stream'); window.open(url); // Or perhaps: location.href = url; // Or even setting the location of an <iframe> element,
另一种方法是使用blob: URI：
var img = document.images[0]; img.onclick = function() { // atob to base64_decode the data-URI var image_data = atob(img.src.split(',')[1]); // Use typed arrays to convert the binary data to a Blob var arraybuffer = new ArrayBuffer(image_data.length); var view = new Uint8Array(arraybuffer); for (var i=0; i<image_data.length; i++) { view[i] = image_data.charCodeAt(i) & 0xff; } try { // This is the recommended method: var blob = new Blob([arraybuffer], {type: 'application/octet-stream'}); } catch (e) { // The BlobBuilder API has been deprecated in favour of Blob, but older // browsers don't know about the Blob constructor // IE10 also supports BlobBuilder, but since the `Blob` constructor // also works, there's no need to add `MSBlobBuilder`. var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder); bb.append(arraybuffer); var blob = bb.getBlob('application/octet-stream'); // <-- Here's the Blob } // Use the URL object to create a temporary URL var url = (window.webkitURL || window.URL).createObjectURL(blob); location.href = url; // <-- Download! };
相关文件
-
atob - 键入数组
-
URL.createObjectURL -
Blob和BlobBuilder
您可以使用标签上的下载属性…
<a href="data:image/jpeg;base64,/9j/4AAQSkZ..." download="filename.jpg"></a>
查看更多： https ： //developer.mozilla.org/en/HTML/element/a#attr-download
我想一个img标签是需要作为一个标签的孩子，如下所示：
<a download="YourFileName.jpeg" href="data:image/jpeg;base64,iVBO...CYII="> <img src="data:image/jpeg;base64,iVBO...CYII="></img> </a>
要么
<a download="YourFileName.jpeg" href="/path/to/OtherFile.jpg"> <img src="/path/to/OtherFile.jpg"></img> </a>
只有使用＃15中所述的标签才能使用Firefox和Chrome的最新版本，但是在a.href和img.src标签中都使用相同的图像数据。
从JavaScript可以这样生成：
var data = canvas.toDataURL("image/jpeg"); var img = document.createElement('img'); img.src = data; var a = document.createElement('a'); a.setAttribute("download", "YourFileName.jpeg"); a.setAttribute("href", data); a.appendChild(img); var w = open(); w.document.title = 'Export Image'; w.document.body.innerHTML = 'Left-click on the image to save it.'; w.document.body.appendChild(a);
看看FileSaver.js 。 它提供了一个方便的saveAs函数，它负责处理大多数浏览器特定的怪癖。
