- 最简单的
const canvas = document.getElementById('my-canvas');
const dataURL = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.download = 'my-canvas.png';
link.href = dataURL;
link.click();
- 使用FileReader
const canvas = document.getElementById('myCanvas');
const dataURL = canvas.toDataURL('image/png');
const blob = dataURLtoBlob(dataURL);
function dataURLtoBlob(dataURL) {
const arr = dataURL.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
const base64data = reader.result;
const a = document.createElement('a');
a.href = base64data;
a.download = 'canvas.png';
a.click();
};
- 方法二的优化
const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'canvas.png';
a.click();
});