Html canvas保存为图片的常见写法

1. 最简单的

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();

2. 使用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();
};

4. 方法二的优化

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();
});