iOS端Chrome中JavaScript实现canvas转图下载时指定文件名不生效问题求解

iOS端Chrome基于WebKit内核构建，存在兼容性缺陷：不支持data:协议的URI搭配<a>标签download属性使用的场景，无法读取该场景下download属性指定的文件名，因此会默认生成名为document的无后缀文件。

将base64格式的dataURL转换为Blob对象，再通过URL.createObjectURL()生成临时本地地址使用，即可让download属性生效，具体实现代码如下：

var dataURL = capture.toDataURL('image/jpeg', 0.8);
// 将base64转换为Blob
var arr = dataURL.split(','), 
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), 
    n = bstr.length, 
    u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {type: mime});
// 生成临时URL并触发下载
var link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "elfie.jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// 释放临时URL资源
setTimeout(() => URL.revokeObjectURL(link.href), 1000);

• 临时生成的Object URL需要手动调用URL.revokeObjectURL()释放，避免占用内存资源
• 该方案兼容所有主流移动端、桌面端浏览器，原有其他平台的正常下载逻辑不会受影响

内容的提问来源于stack exchange，提问作者Sean Clark