Canvas 输出图片并下载

function downloadCanvas(element: HTMLCanvasElement, fileName = 'canvas.png') {
  const anchor = document.createElement('a');
  const pngBase64Data = element.toDataURL('image/png');
  // .replace('data:image/png;base64,', '')
  const blob = base64ToBlob(pngBase64Data);
  const url = URL.createObjectURL(blob);
 
  anchor.href = url;
  anchor.download = fileName;
  anchor.click();
 
  // URL.revokeObjectURL(url);
 
  function base64ToBlob(base64Data: string) {
    const byteString = atob(base64Data.replace('data:image/png;base64,', ''));
    const buffer = new ArrayBuffer(byteString.length);
    const view = new Uint8Array(buffer);
    for (let i = 0; i < byteString.length; i++) {
      view[i] = byteString.charCodeAt(i);
    }
    return new Blob([buffer], { type: 'image/png' });
  }
}

 javascript:(() => { const script = document.createElement('script'); script.innerHTML = "function downloadCanvas(element, fileName = 'canvas.png') { const anchor = document.createElement('a'); const pngBase64Data = element.toDataURL('imagepng'); const blob = base64ToBlob(pngBase64Data); const url = URL.createObjectURL(blob); anchor.href = url; anchor.download = fileName; anchor.click(); function base64ToBlob(base64Data) { const byteString = atob(base64Data.replace('data:imagepng;base64,', '')); const buffer = new ArrayBuffer(byteString.length); const view = new Uint8Array(buffer); for (let i = 0; i < byteString.length; i++) { view[i] = byteString.charCodeAt(i); } return new Blob([buffer], { type: 'imagepng' }); }}"; document.body.appendChild(script); })();