html2canvas是什么
html2canvas 可以在浏览器端直接对整个或部分页面进行截屏。脚本通过读取DOM并将不同的样式应用到这些元素上，从而将当页面渲染成一个Canvas图片。
html2canvas怎么用
// element：要绘图的dom节点；
// options：可选参数；
html2canvas(element, options).then(function(canvas) {
document.body.appendChild(canvas);
});
html2canvas的例子
- 首先定义两个使用到的方法
/* 根据window.devicePixelRatio获取像素比 */
function DPR() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
}
/* 将传入值转为整数 */
function parseValue(value) {
return parseInt(value, 10);
}
devicePixelRatio属性是干嘛的
window的该属性能够获取到当前显示设备物理分辨率与css的像素分辨率之间的比率。简单说就是告诉浏览器应该使用多少个物理像素来会在单个css像素。
2.绘制canvas
async function drawCanvas(selector) {
// 获取想要转换的 DOM 节点
const dom = document.querySelector(selector);
const box = window.getComputedStyle(dom);
// DOM 节点计算后宽高
const width = parseValue(box.width);
const height = parseValue(box.height);
// 获取像素比
const scaleBy = DPR();
// 创建自定义 canvas 元素
let canvas = document.createElement('canvas');
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 设定 canvas css宽高为 DOM 节点宽高
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
// 获取画笔
const context = canvas.getContext('2d');
// 将所有绘制内容放大像素比倍
context.scale(scaleBy, scaleBy);
let x = width;
let y = height;
return await html2canvas(dom, {
useCORS:true // 配置这个可以用cors跨域使用服务器图片
}).then(function() {
// 绘制的图片就是canvas；在这里可以对canvas进行你所需要的操作
});
}
关于在配置项中设置跨域
useCORS和allowTaint两种都可以设置跨域；
为什么要设置跨域：我们图片一般都是放到静态资源服务器上的，资源服务器地址一般和项目地址是不一样的；虽然图片可以在页面上显示，但是用canvas绘图时却绘制不出来；
3.清晰度优化（canvas图片转base64显示）
经过上面的步骤就可以绘制出canvas图片了，但是查看实际图片时会发现，图片部分绘制是没问题的，但是文字部分就模糊了；因此还需对绘制出来的canvas做进一步处理
/* 图片转base64格式 */
function convertCanvasToImage(canvas, x, y) {
let image = new Image();
image.crossOrigin = 'anonymous';
image.width = x;
image.height = y;
image.style="display: block;";
image.src = canvas.toDataURL('image/png');
return image
}
4.其他
canvas绘制图片的dom元素部分最好定义宽高，不然单纯靠子元素撑开的话，绘图的时候可能会绘制不完整
参考文档
html2canvas的官方地址：html2canvas.hertzen.com
devicePixelRatio的文档地址：//developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
