用法
http://html2canvas.hertzen.com/documentation
要element使用带有一些(可选)选项的 html2canvas 呈现,只需调用html2canvas(element, options);
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
});
可用的配置选项
name | default | description |
---|
allowTaint | false | 是否允许跨域图像污染画布 |
backgroundColor | #ffffff | 画布背景色(如果未在DOM中指定)。设置null为透明 |
canvas | null | 现有canvas元素用作绘图的基础 |
foreignObjectRendering | false | 如果浏览器支持,是否使用ForeignObject渲染 |
imageTimeout | 15000 | 加载图像的超时时间(以毫秒为单位)。设置0为禁用超时。 |
ignoreElements | (element) => false | 谓词功能,可从渲染中删除匹配的元素。 |
logging | true | 启用日志以进行调试 |
onclone | null | 克隆文档以进行渲染时调用的回调函数可用于修改将要渲染的内容,而不会影响原始源文档。 |
proxy | null | 代理将用于加载跨域图像的网址。如果保留为空,则不会加载跨域图像。 |
removeContainer | true | 是否清除html2canvas临时创建的克隆DOM元素 |
scale | window.devicePixelRatio | 用于渲染的比例。默认为浏览器设备像素比率。 |
useCORS | false | 是否尝试使用CORS从服务器加载图像 |
width | Element width | canvas宽度 |
height | Element height | canvas高度 |
x | Element x-offset | 裁剪画布X坐标 |
y | Element y-offset裁剪画布y坐标 | |
scrollX | Element scrollX | 渲染元素时要使用的x滚动位置(例如,如果Element使用position: fixed) |
scrollY | Element scrollY | 呈现元素时要使用的y-scroll位置(例如,如果Element使用position: fixed) |
windowWidth | Window.innerWidth | 渲染时使用的窗口宽度Element,这可能会影响媒体查询之类的内容 |
windowHeight | Window.innerHeight | 渲染时要使用的窗口高度Element,这可能会影响媒体查询之类的内容 |
<div class="save-img" ref="userCode"> </div>
import html2canvas from 'html2canvas'
const canvas2 = document.createElement('canvas');
let dom = that.$refs.userCode;
let width = dom.offsetWidth;
let height = dom.offsetHeight;
canvas2.width = width * window.devicePixelRatio;
canvas2.height = height * window.devicePixelRatio;
html2canvas(dom,{
backgroundColor: null,
async: true,
useCORS:true,
canvas: canvas2
}).then((canvas) => {
let dataURL = canvas.toDataURL("image/png");
that.saveImgUrl = dataURL;
});