不容错过的前端快照功能（html2canvas）

背景

结合后端数据生成运营推广页面，用户通过保存操作将推广页面保存为图片进行分享和传播。其中涉及到的前端主要技术点：

1. dom转图片
2. 保存图片到本地

了解 CORS

CORS（Cross-Origin Resource Sharing，跨域资源共享），同源安全策略默认阻止跨域获取资源，通过CORS给了Web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。CORS由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端JavaScript代码获取跨域请求的响应。

什么情况下需要CORS:

1. 由XMLHttpRequest或Fetch发起的跨源HTTP请求。
2. Web字体 (CSS中通过@font-face使用跨源字体资源)。
3. WebGL贴图。
4. 使用drawImage将Images/video画面绘制到canvas。

技术方案

html2canvas提供将dom绘制到canvas，file-saver：提供将Blob导出为本地文件。流程既是：
dom => html2canvas => canvas => blob => file-saver => image

import html2canvas from 'html2canvas';
import {
    saveAs } from 'file-saver';

const dom = document.getElementById('html-to-canvas')
html2canvas(dom, {
   
  useCORS: true,
})
  then(canvas => {
   
    const blob