H5页面保存base64图片到本地

保存base64图片到本地

H5页面与APP端、小程序端有所不同，其没有操作本地文件的权限，因此保存图片功能需要“下载”来支持。

一般我们通过canvas等功能生成的图片都是base64格式的。我们需要
1.将base64解码转换成blob对象
2.将blob对象封装到a标签中置入页面
3.模拟点击这个a标签触发下载请求

实现：

function savePicture(base64) {
	var arr = base64.split(',');
	var bytes = atob(arr[1]);
	let ab = new ArrayBuffer(bytes.length);
	let ia = new Uint8Array(ab);
	for (let i = 0; i < bytes.length; i++) {
		ia[i] = bytes.charCodeAt(i);
	}
	var blob = new Blob([ab], { type: 'application/octet-stream' });
	var url = URL.createObjectURL(blob);
	var a = document.createElement('a');
	a.href = url;
	a.download = new Date().valueOf() + ".png";
	var e = document.createEvent('MouseEvents');
	e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
	URL.revokeObjectURL(url);
}