项目场景是完成测评试题,生成学生测评报告,部署在微信公众号上的移动端H5页面,
本文记录vue中使用html2canvas生成图片。
html2canvas官方网站
1基础使用
1.1 安装html2canvas
npm install html2canvas
import html2canvas from 'html2canvas';
1.2 html2canvas 的配置选项
配置项 | 默认 | 描述 |
---|---|---|
allowTaint | false 允许污染 | 是否允许跨域图片污染画布 |
backgroundColor | #ffffff 背景颜色 | 画布背景颜色,如果在 DOM 中没有指定。设置null 为透明 |
canvas | null 帆布 | canvas 用作绘图基础的现有元素 |
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 | 是否尝试使用 CORS 从服务器加载图像 |
width | Element width宽度 | 的宽度canvas |
height | Element height高度 | 的高度canvas |
x | Element x-offset | 裁剪画布 x 坐标 |
y | Element y-offset | 裁剪画布 y 坐标 |
scrollX | Element scrollX滚动X | 渲染元素时使用的 x 滚动位置,(例如,如果元素使用position: fixed ) |
scrollY | Element scrollY滚动Y | 渲染元素时使用的 y 滚动位置,(例如,如果元素使用position: fixed ) |
windowWidth | Window.innerWidth 窗口宽度 | 渲染时使用的窗口宽度Element ,这可能会影响媒体查询等内容 |
windowHeight | Window.innerHeight 窗口高度 | 渲染时使用的窗口高度Element ,这可能会影响媒体查询等内容 |
1.3 vue中使用代码
<template>
<div class="app_container" id="repImg" ref="repImg">
<p>
content
</p>
<button @click="generateImage"></button>
</div>
</template>
import html2canvas from 'html2canvas';
export default {
methods: {
generateImage: function() {
// 通过this.$refs获取vue页面中的dom元素
let canvasID = this.$refs['repImg'];
var _this = this;
let a = document.createElement('a');
// 获取元素的可滚动内容的高度
var height = document.querySelector('#repImg').scrollHeight
console.log(canvasID)
canvasID.style.height = height+"px";
canvasID.style.zIndex = '-1';
html2canvas(canvasID).then(function(canvas) {
let dom = document.body.appendChild(canvas);
dom.style.display = 'none';
a.style.display = 'none';
document.body.removeChild(dom);
let blob = _this.dataURLToBlob(dom.toDataURL('image/png'));
a.setAttribute('href', URL.createObjectURL(blob));
//这块是保存图片操作 可以设置保存的图片的信息
a.setAttribute('download', '测评报告' + '.png');
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
dataURLToBlob(dataurl) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
}
}