Javascript - 将图像数据 url 更改/转换为 ionic 2 中的文件 url答案

【问题标题】：Javascript - Change/convert image data url to file url in ionic 2Javascript - 将图像数据 url 更改/转换为 ionic 2 中的文件 url
【发布时间】：2018-04-04 17:45:30
【问题描述】：

图片的数据url可以更改或转换为文件url吗？

例如，我从链接中获取了图像，但数据很长，例如

数据：图像/ X-图标; BASE64，AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAABMLAAATCwAAAAAAAAAAAABsiqb / bIqm / 2yKpv9siqb / bIqm / 2yKpv9siqb / iKC3 / 2yKpv9siqb / bIqm / 2yKpv9siqb / bIqm / 2yKpv9siqb / bIqm / 2yKpv9siqb / bIqm / 2yKpv9siqb / 2uLp ////// /R2uP/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm/2yKpv9siqb/bIqm///////////////+3w9P+IoLf/bIqm/2yKpv9siqb/bIqm/2yKpv9siq/ bIqm/2yKpv9siqb/bIqm/2yKpv//////////+3w9P+tvc3/dZGs/2yKpv9siqb/bIqm/2yKpv9siqb/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH//////////// 0+Pv/erDR/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB////////////////////96sNH/TZbB/02Wwf9NlsH/TZbB /02Wwf9NlsH/TZbB/02Wwf9NlsH/TZbB/02Wwf//////////////+Ft9T/TZbB/02Wwf9NlsH/TZbB/02Wwf9NlsH/E4zV/xOM1f8TjNX/E4zV/yKT2P/T6ff//// ////////////4fH6/z+i3f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f+m1O//////////////// //////////w+Pz/IpPY/xOM1f8TjNX/E4zV/xOM1f8TjNX/E4zV/xOM1f8TjNX//////////T6ff/Tqng/6bU7/////// /////3u/5/8TjNX/E4zV/xOM1f8TjNX/AIv//wCL//8Ai///AIv///////////gMX/ /wCL//8gmv///////////+Axf//AIv//wCL//8Ai///AIv//wCL//8Ai///AIv//wCL///v+ P///////+/4//+Axf//z+n////////////YLf//wCL//8Ai///AIv//wCL//8Ai ///AIv//wCL//8Ai///gMX/////////////////////////z+n//wCL/ /8Ai///AIv//wCL//8Ai///AHr//wB6//8Aev//AHr//wB6//+Avf//7/f//////////// v97//xCC//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6/ /8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr//wB6//8Aev//AHr //wB6//8Aev//Ahr//wB6//8Aev//AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=

那么如何转换成这样的

file:///storage/emulated/..../image1.jpg

【问题讨论】：

问题中的data URI 是否完整？
在新标签页中打开网址，然后菜单 > 将文件另存为。

标签： javascript url uri

【解决方案1】：

您可以将有效data URI 的MIME 类型替换为"application/octet-stream"，将值设置为<a> 元素的.href，将download 属性值设置为"image1.validExtension"，将元素附加到document.body，在a元素上调用.click()

var stream = validDataURI.replace(/[^:][\w/-]+(?=;|,)/, "application/octet-stream");
var a = document.createElement("a");
a.href = stream;
a.download = "image1.validExtension";
document.body.appendChild(a);
a.click();

【讨论】：