html2canvs的一些问题
let html2canvas = null;
export default {
beforeMount() {
import('html2canvas').then((plugin) => {
html2canvas = plugin.default;
});
},
methods: {
// 获取分享图片 base64
getShareImgBase64() {
return new Promise((resolve) => {
setTimeout(() => {
// #capture 就是我们要获取截图对应的 DOM 元素选择器
html2canvas(document.querySelector('#capture'), {
useCORS: true, // 【重要】开启跨域配置
scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
allowTaint: true, // 允许跨域图片
}).then((canvas) => {
const imgData = canvas.toDataURL('image/jpeg', 1.0);
resolve(imgData);
});
}, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
});
},
},
};html2canvas(element: HTMLElement, options: object): Promise<HTMLCanvasElement>
options对象可选的值如下：
| Name | Default | Description |
|---|---|---|
| allowTaint | false | 是否允许跨域图像污染画布 |
| backgroundColor | #ffffff | 画布背景颜色，如果在DOM中没有指定，设置“null”（透明） |
| canvas | null | 使用现有的“画布”元素，用来作为绘图的基础 |
| foreignObjectRendering | false | 是否使用ForeignObject渲染（如果浏览器支持的话） |
| imageTimeout | 15000 | 加载图像的超时时间(毫秒)，设置为“0”以禁用超时 |
| ignoreElements | (element) => false | 从呈现中移除匹配元素 |
| logging | true | 为调试目的启用日志记录 |
| onclone | null | 回调函数，当文档被克隆以呈现时调用，可以用来修改将要呈现的内容，而不影响原始源文档。 |
| proxy | null | 用来加载跨域图片的代理URL，如果设置为空（默认），跨域图片将不会被加载 |
| removeContainer | true | 是否清除html2canvas临时创建的克隆DOM元素 |
| scale | window.devicePixelRatio | 用于渲染的缩放比例，默认为浏览器设备像素比 |
| useCORS | false | 是否尝试使用CORS从服务器加载图像 |
| width | Element width | canvas的宽度 |
| height | Element height | canvas的高度 |
| x | Element x-offset | canvas的x轴位置 |
| y | Element y-offset | canvas的y轴位置 |
| scrollX | Element scrollX | 渲染元素时使用的x轴位置(例如，如果元素使用position: fixed) |
| scrollY | Element scrollY | 渲染元素时使用的y轴位置(例如，如果元素使用position: fixed) |
| windowWidth | Window.innerWidth | 渲染元素时使用的窗口宽度，这可能会影响诸如媒体查询之类的事情 |
| windowHeight | Window.innerHeight | 渲染元素时使用的窗口高度，这可能会影响诸如媒体查询之类的事情 |
忽略元素
options有一个ignoreElements参数可以用来忽略某些元素，从渲染过程中移除，除了设置该参数外，还有一种忽略元素的方法，就是在需要忽略的元素上增加data-html2canvas-ignore属性。
跨域的问题
对于允许跨域的图片我们可以在 Headers 里面看到
Access-Control-Allow-Origin:*
对于这个问题，最简单的解决方案就是直接在所在图片的 img 标签里面加上 crossOrigin = "anonymous"，即：
<img crossorigin="anonymous" src="xxx" >
在某些情况下如果你发现加上 crossOrigin = "anonymous" 之后，图片显示不出来了，此时给图片的 url 中拼上一个随机字符串即可。
<img crossorigin="anonymous" :src="`xxx?_=${Date.now()}`" >
当然，想要永久的解决这个问题需要后端同学配合在图片服务器上设置 图片服务器配置 Access-Control-Allow-Origin: *。
html2canvs官方文档
Options | html2canvas