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官方文档