【JavaScript】纯JS使用html2canvas对网页指定内容进行截图使用教程
|
admin
2023年8月4日 18:47
本文热度 595
|
1 简介
html2canvas屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据页面上可用的信息构建屏幕截图。
附件:html2canvas.rar
官网地址
2 安装
2.1 es6 模块化引入方式,项目中使用
npm install --save html2canvas// 或yarn add html2canvas123
2.2 js直引方式
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>1
3 使用
基础语法
html2canvas(element, options);1
import html2canvas from 'html2canvas';html2canvas(document.body,{}).then(function(canvas) {
var imgUrl = canvas.toDataURL();
//imgUrl即为图片的base64形式});123456
4 属性
属性名 | 默认值 | 描述 |
---|
allowTaint | false | 是否允许跨域图像。会污染画布,导致无法使用canvas.toDataURL 方法 |
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,这可能会影响媒体查询之类的内容 |
解决图片清晰度问题
属性 | 默认值 | 描述 |
---|
scale | window.devicePixelRatio | 用于渲染的比例尺。默认为浏览器设备像素比率。 |
每个设备的window.devicePixelRatio的值不尽一样,想清晰就调高,想压缩大小就调低。但调的越高,图片的生成时间就越长。
html2canvas(document.body,{ scale:1.3 }).then(function(canvas) {
var imgUrl = canvas.toDataURL();
//imgUrl即为图片的base64形式});
该文章在 2023/8/4 18:50:38 编辑过
| |
全部评论1 |
|
admin
2023年8月4日 18:49
为确保稳定,可以延迟加载: setTimeout(function () {
html2canvas($('#img_html')[0]).then(function (canvas) {
var img = new Image();
img.src = canvas.toDataURL('image/jpeg'); //或者:document.getElementById("tmp_pic").src= = canvas.toDataURL('image/jpeg');
})
}, 1000)
因为html是动态生成的,所以最好加上setTimeout延时转换成canvas,不然可能html的dom元素还没加载完。 该评论在 2023/8/4 18:49:34 编辑过
|