阅读3分钟
html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现
它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。
html2canvas(element, options);
html2canvas(document.body, {
onrendered: function(canvas) {
var url = canvas.toDataURL();
document.body.appendChild(canvas);
width: 300,
height: 300
html2canvas基本参数说明
| 参数名称 | 类型 | 默认值 | 描述 |
|---|
| allowTaint | boolean | false | Whether to allow cross-origin images to taint the canvas---允许跨域 |
| background | string | #fff | Canvas background color, if none is specified in DOM. Set undefined for transparent---canvas的背景颜色，如果没有设定默认透明 |
| height | number | null | Define the heigt of the canvas in pixels. If null, renders with full height of the window.---canvas高度设定 |
| letterRendering | boolean | false | Whether to render each letter seperately. Necessary if letter-spacing is used.---在设置了字间距的时候有用 |
| logging | boolean | false | Whether to log events in the console.---在console.log()中输出信息 |
| proxy | string | undefined | Url to the proxy which is to be used for loading cross-origin images. If left empty, cross-origin images won"t be loaded.---代理地址 |
| taintTest | boolean | true | Whether to test each image if it taints the canvas before drawing them---是否在渲染前测试图片 |
| timeout | number | 0 | Timeout for loading images, in milliseconds. Setting it to 0 will result in no timeout.---图片加载延迟，默认延迟为0，单位毫秒 |
| width | number | null | Define the width of the canvas in pixels. If null, renders with full width of the window.---canvas宽度 |
| useCORS | boolean | false | Whether to attempt to load cross-origin images as CORS served, before reverting back to proxy--这个我也不知道是干嘛的 |
生成的图片里面缺失图片
其实涉及到的就是跨域问题,即便是canvas的画布中对于图片的域也是有要求的,那我们应该怎么解决呢?
html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用)
img标签增加 crossOrigin='anonymous'图片服务器配置Access-Control-Allow-Origin 或使用代理
其中第三步是最重要的,不设置则前两步设置了也无效。
服务器需要配置
Access-Control-Allow-Origin信息,如PHP添加响应头信息，*通配符表示允许任意域名：
header("Access-Control-Allow-Origin: *");
复制代码或者指定域名：
header("Access-Control-Allow-Origin: xxx");
生成的图片有缺失元素
因为html是动态生成的，所以最好加上setTimeout延时转换成canvas，不然可能html的dom元素还没加载完'
要转换成图片的 html，其css样式要有几点注意：
亲测不能使用rem为单位定义文字大小、元素宽高等，不然无法显示该元素
不能添加background，假如设置背景颜色为红色或者一张背景图，莫名其妙会多出一个元素
生成的图片模糊不清且有锯齿瑕疵
实践可知scale和dpi可用,推荐使用scale参数。
let imgHeight = window.document.querySelector('.content').offsetHeight
let imgWidth = window.document.querySelector('.content').offsetWidth
let scale = window.devicePixelRatio
html2canvas(window.document.querySelector('.content'), {
useCORS: true,
scale: scale,
width: imgWidth,
height: imgHeight
}).then((canvas) => {
window.document.querySelector('.content').remove()
let elemImg = `<img src='${canvas.toDataURL('image/png')}' id='canvas-img' style='height: ${imgHeight}px;border-radius: 10px;width:${imgWidth}px'/>`
window.document.querySelector('.container').innerHTML = elemImg
高分辨率下，文字模糊
此为预料中的情况，获取了设备像素比 window.devicePixelRatio 百分比伸展 canvas 画布即可......才怪......
然后发现这是 0.5 版本需要做的操作，1.0 版本的默认参数 scale 已经设置好了，但还是不太清晰。
最后从掘金处得到启发，最终解决方法是！！
一律设为 4 倍！即
html2canvas(ele, {
sacle: 4
}).then((canvas) => {});
人生缺张草稿
前端开发工程师
粉丝
