强制下载base64映像

Question

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

dataurl生成base4 png字符串（数据：image/jpeg；base64，/9j/4aaqskzjrgabaaqabaad/2wbdaaaebaqebaqebaq………）

我试着按照另一个帖子中的建议使用，但没有效果。

欢迎所有建议。谢谢

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

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

Answer 2

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

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

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

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

Answer 3

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