GitHub iconTwitter icon

🎨 html2canvas

something about html2canvas package

Html2Canvas(container as HTMLElement).then((canvas: HTMLCanvasElement) => {
  canvas.toBlob(blob => {
    if (!blob) {
      return;
    }
    const item = new ClipboardItem({ "image/png": blob });
    (navigator.clipboard as any).write([item]);
    container.removeChild(sheet);
    setCopyLoading(false);
  });
});

onclone 可以获取下载完成状态

如何手动下载

setDownloading(true);
html2canvas(document.querySelector("#WEBGRADIENTS") as HTMLElement, {
  onclone: () => {
    setDownloading(false);
  }
})
  .then(canvas => {
    // link是通过document创建的a标签
    link.download = "pixel-crash.png";
    link.href = canvas.toDataURL();
    link.click();
  })
  .then(() => {
    // do something
  });