背景
结合后端数据生成运营推广页面,用户通过保存操作将推广页面保存为图片进行分享和传播。其中涉及到的前端主要技术点:
dom
转图片- 保存图片到本地
了解 CORS
CORS
(Cross-Origin Resource Sharing,跨域资源共享),同源安全策略默认阻止跨域获取资源,通过CORS
给了Web
服务器这样的权限,即服务器可以选择,允许跨域请求访问到它们的资源。CORS
由一系列传输的HTTP
头组成,这些HTTP
头决定浏览器是否阻止前端JavaScript
代码获取跨域请求的响应。
什么情况下需要CORS
:
- 由
XMLHttpRequest
或Fetch
发起的跨源HTTP
请求。 Web
字体 (CSS
中通过@font-face
使用跨源字体资源)。WebGL
贴图。- 使用
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