强制下载base64镜像答案

【问题标题】：force download base64 image强制下载base64镜像
【发布时间】：2015-02-04 08:03:49
【问题描述】：

从 JS 开始并不是我的强项之一。过去几天我一直在尝试编辑这个 JS 函数以使其强制下载 base64 图像。当单击下载按钮时，该功能的作用是打开一个带有图像的新窗口。然后用户必须右键单击并保存图片。我正在尝试强制下载图片，而不是右键单击并“另存为”。

dataurl产生base4 png字符串(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQ……)

我尝试按照另一个线程中的建议使用，但没有奏效。

欢迎所有建议。谢谢。

savePaint: function() {
            var self = this;

            dataURL = self.context.canvas.toDataURL();

            var cntnt = $("<p class='dialogHeader'>Please right click and select 'Save Image As' option. Click here to Return</p>           <img id='PrintImage' src=" + dataURL + ">");
            self.newSavedImage.html(cntnt);

            self.showPopup(self.newSavedImage, self.canvasWidth, self.canvasHeight)
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以试试这个：
javascript文件：

var valuToDecode = document.getElementById("base64-image-string").value;
var linkImg = valuToDecode.concat('" alt="Red dot" download="ganixo-file.png"> click here to download your img </a>');
document.getElementById("codedImg").innerHTML=  '<a href="data:image/jpeg;base64,'.concat(linkImg);

html 文件：

Image url:<p  id="codedImg"></p>

输出：

<p id="codeImg"><a href="data:image/jpeg;base64,iVB..." download="img.png">click here to download your img</a></p>

【讨论】：

【解决方案2】：

终于！我让它工作。对于遇到同样问题的人，我在这里找到了一个函数http://danml.com/download.html，它可以让你强制下载 base64。

【讨论】：

仅链接的答案不好。请将相关代码带入您的答案中。
在添加相关代码之前不赞成。链接是太多的文字墙。在这里用代码更好的简单答案：stackoverflow.com/questions/14011021/…

【解决方案3】：

您可以指定不同的 MIME 类型而不是 image/jpeg，这样浏览器就不会尝试以本机方式打开图像：

data:application/octet-stream;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...

这将强制文件下载，但我注意到在某些浏览器配置中可能会使用默认文件名自动保存，并且由于浏览器不知道真正的文件类型，因此由用户指定正确的类型。不幸的是，数据 URI 方案不允许使用建议的文件名。

查看Using HTML5/Javascript to generate and save a file 了解更多可能的解决方案。根据您的要求，您最好的选择可能是使用基于 Flash 的解决方案，例如 Downloadify。

【讨论】：