js截屏插件（html2Canvas）_js截图插件-CSDN博客

本文链接：https://blog.csdn.net/m0_50207524/article/details/125063020

js截屏插件（html2Canvas）

前言
相关文件和链接
一、简单的html截屏案例
二、vue项目中使用js截屏插件
- 1、使用npm安装插件并导入
- 2、获取到dom节点然后添加操作
四、如果链接存在问题或者使用中遇到问题请留言给我

前言

在开发中我们用到的js截屏有很多方法，本次讲解下html2Canvas

一、简单的html截屏案例

//所需的js文件前言中的链接提取

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>html2canvas example</title>
    <script type="text/javascript" src="./html2canvas.js"></script>
</head>
<script type="text/javascript">
function takeScreenshot() {
	//调用截屏的方法
    html2canvas(document.getElementById('view'), {
        onrendered: function(canvas) {
        	//截图base64格式
            canvas.toDataURL()
            //添加截屏到dom节点
            document.body.appendChild(canvas);
        },
    });
}
</script>
<body>
    <div id="view" style="background:red; width: 700px; height: 500px;">
        <input type="button" value="截屏" onclick="takeScreenshot()">
    </div>
</body>
</html>

在这里插入图片描述

二、vue项目中使用js截屏插件

1、使用npm安装插件并导入

npm install html2canvas
import html2canvas from 'html2canvas';

2、获取到dom节点然后添加操作

onMakePicture() {
	//这是选择你要进行截屏的dom
   const dom = this.$refs.picDom
   html2canvas(dom).then(function (canvas) {
     // console.log('canvas',canvas)
     const link = document.createElement("img");
     //将图片转换为base64
     link.src = canvas.toDataURL();
     link.style.width = "100%";
     link.style.height = "100%";
     link.style.position = "absolute";
     link.style.top = "0";
     link.style.left = "0";
     dom.appendChild(link);
   });

 },