只需替换
image/jpeg为
application/octet-stream。客户端不会将该URL识别为可内联资源，并提示下载对话框。
一个简单的Javascript解决方案是：
//var img = reference to imagevar 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_depre 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!};
