【JavaScript】纯JS使用html2canvas对网页指定内容进行截图使用教程
|
admin
2023年8月4日 18:47
本文热度 746
|
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形式});1234564 属性
| 属性名 | 默认值 | 描述 |
|---|
| 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 编辑过
|
400 186 1886
