数据;浏览器/ HTML力的图像，从SRC =＆QUOT下载：图像/ JPEG;的base64 ...＆QUOT; [英] Browser/HTML Force download of image from src="data:image/jpeg;base64..."

问题描述

我生成的客户端上的形象和我的HTML显示它是这样的：

I am generating a image on client side and I display it with HTML like this:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgM...."/>

我想提供下载生成的图像的可能性。

I want to offer the possibility to download the generated Image.

我怎么能认识到浏览器打开一个文件保存dialoge（或只是下载像Chrome或Firefox的下载文件夹会做图像），它允许用户保存图像的没有做点击右键并保存为的形象？

How can I realize that the browser is opening a file save dialoge (or just download the image like chrome or firefox to the download folder would do) which allows the user to save the image without doing right click and save as on the image?

我想preFER没有服务器交互的解决方案。所以，我知道，这将是可能的，如果我第一次上传的图片，然后开始下载。

I would prefer a solution without server interaction. So I am aware that it would be possible if I first upload the Image and then start the download.

非常感谢！

推荐答案

只需更换图像/ JPEG 与应用程序/八位字节流。客户端将无法识别URL作为一个行内能资源，并提示下载对话框。

Simply replace image/jpeg with application/octet-stream. The client would not recognise the URL as an inline-able resource, and prompt a download dialog.

一个简单的JavaScript的解决办法是：

A simple JavaScript solution would be:

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


• 类型数组


• <$c$c>URL.createObjectURL


• 的Blob 和<一个HREF =htt​​ps://developer.mozilla.org/en-US/docs/DOM/BlobBuilder> BlobBuilder



这篇关于数据;浏览器/ HTML力的图像，从SRC =＆QUOT下载：图像/ JPEG;的base64 ...＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！