强制下载 base64 镜像

Question

从 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)
}

Answer 1

最后！ 我让它工作。 对于任何面临同样问题的人，我在这里找到了一个功能http://danml.com/download.html ，可以让您强制下载 base64。

Answer 2

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

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

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

查看使用 HTML5/Javascript 生成并保存文件以获取更多可能的解决方案。 根据您的要求，您最好的选择可能是使用基于 Flash 的解决方案，例如Downloadify 。

Answer 3

你可以试试这个：
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>