使用html2canvas插件进行页面截屏

news2024/11/25 2:21:53

使用纯html实现过程

<!DOCTYPE html>
<html>

<head>
  <title>使用html2canvas生成网页截图</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
  <h1>使用html2canvas生成网页截图</h1>
  <div id="content">
    <p>这是一个要截图的元素12345</p>
  </div>

  <script>
    // target是代表要截图的元素范围(就是截图当前元素包括当前元素内的子元素)
    var target = document.getElementById('content')
    html2canvas(target).then(function (canvas) {
      // 参数canvas就是绘画的(截屏)的图片
      // 如果要给canvas元素添加css,本人亲测不行,只能用下面的方法给canvas元素加样式,加完样式再追加到页面中(亲测可行,本人暂时没有别的好办法,说的不对还请见谅)
      const capturedCanvas = canvas
      capturedCanvas.style.border = '2px solid red'
      // 将生成的图片追加到document.body里面
      document.body.appendChild(canvas)
    });
  </script>
</body>

</html>

使用框架(vue,react,uniapp)实现

需要先下载依赖包

npm install html2canvas

下面是一个完整的页面代码,可以直接运行

<template>
  <div ref="tu" id="tupian" style="font-family: initial;">
    <button @click="captureScreen">点击截屏</button>
	<image :src="imgurl" alt="" mode="aspectFill"/>
  </div>
</template>

<script>
import { ref } from 'vue';
import html2canvas from 'html2canvas';

export default {
  setup() {
	const tu = ref(null)
	const imgurl = ref('')
    const captureScreen = () => {
		// 截屏的元素区域
      var target = document.getElementById('tupian')
	  // 添加截屏的逻辑
          html2canvas(target).then(function (canvas) {
			  console.log(canvas);
			  // canvas就是当前截屏出来的屏幕样式,可以通过以下方法给生成的图片加样式
			  const capturedCanvas = canvas;
			  capturedCanvas.style.width = '100%';
			  capturedCanvas.style.height = '200px';
			  capturedCanvas.style.border = '2px solid red';
			  
			  // 将生成的界面添加到当前组件内(直接展示canvas,如果想替换img的话往下面看)
            // tu.value.appendChild(canvas)
			
			const dataURL = canvas.toDataURL();
			  // 这个就是base64格式的图片地址
			  console.log(dataURL);
			  // 将图片地址赋值给img
			imgurl.value = dataURL
          });
    };

    return {
      captureScreen,
	  tu,
	  imgurl
    };
  }
};
</script>
<style lang="scss">
</style>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1212314.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

jQuery使用echarts循环插入图表

目录 jQuery动态循环插入echarts图表 y轴显示最大值和最小值 x轴只显示两个值&#xff0c;开始日期和结束日期 jQuery动态循环插入echarts图表 html .center_img_list 是我们循环数据的地方 <div class"center_img shadow"><div class"center_img_b…

python_pycharm安装与jihuo

目录 环境&#xff1a; 安装包与jihuo文件&#xff1a; 安装python3.8.10 安装pycharm jihuo pycharm 概述 过程 jihuo 相关文件 环境&#xff1a; window11 python3.8.10 pycharm-professional-2019.1.3 安装包与jihuo文件&#xff1a; 安装python3.8.10 安装pyc…

算法通关村——归并排序

归并排序 1、归并排序原理 ​ 归并排序是一种很经典的分治策略。 ​ 归并排序(MERGE-SORT)简单来说就是将大的序列先视为若干小的数组&#xff0c;分成几个比较小的结构&#xff0c;然后是利用归并的思想实现的排序方法。将一个大的问题分解成一些小的问题分别求解&#xff…

mask-rcnn原理与实战

一、Mask R-CNN是什么&#xff0c;可以做哪些任务&#xff1f; Mask R-CNN是一个实例分割&#xff08;Instance segmentation&#xff09;算法&#xff0c;可以用来做“目标检测”、“目标实例分割”、“目标关键点检测”。 1. 实例分割&#xff08;Instance segmentation&am…

pipeline + node +jenkins+kubernetes部署yarn前端项目

1、编写Dockerfile文件 # Set the base image FROM node:16.10.0# WORKDIR /usr/src/app/ WORKDIR /home/option# Copy files COPY ./ /home/option/# Build arguments LABEL branch${BRANCH} LABEL commit${COMMIT} LABEL date${BUILD_DATE} ARG ENV# Set ENV variables ENV …

Python循环的技巧和注意事项

在Python中&#xff0c;主要使用for循环和while循环进行迭代。为了更有效的使用循环&#xff0c;避免一些常见的陷阱&#xff0c;总结了一些关于使用循环的注意事项。 1. 避免无限循环 在while循环中&#xff0c;程序会一直执行循环体&#xff0c;直到条件不再满足&#xff0c…

2023年05月 Python(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 有列表L=[‘UK’,‘china’,‘lili’,“张三”],print(L[-2])的结果是?( ) A: UK B: ‘lili’,‘张三’ C: lili D: ‘UK’,‘china’,‘lili’ 答案:C 列表元素定位 第2题 …

【VSCode】配置C/C++开发环境教程(Windows系统)

下载和配置MinGW编译器 首先&#xff0c;我们需要下载并配置MinGW编译器。 下载MinGW编译器&#xff0c;并将其放置在一个不含空格和中文字符的目录下。 配置环境变量PATH 打开控制面板。可以通过在Windows搜索栏中输入"控制面板"来找到它。 在控制面板中&#xf…

Apache Pulsar 技术系列 - 基于 Pulsar 的海量 DB 数据采集和分拣

导语 Apache Pulsar 是一个多租户、高性能的服务间消息传输解决方案&#xff0c;支持多租户、低延时、读写分离、跨地域复制、快速扩容、灵活容错等特性。本文是 Pulsar 技术系列中的一篇&#xff0c;主要介绍 Pulsar 在海量DB Binlog 增量数据采集、分拣场景下的应用。 前言…

电视剧剪辑,微课制作神器Camtasia的干货介绍,建议收藏。

最近无论是b站&#xff0c;抖音&#xff0c;快手等视频软件中都有不少微课视频、电视剧解说横空出世&#xff0c;通过这些“热度”带来的收益也是无法估量的&#xff0c;很多自媒体博主月入上万惹人羡慕。 不少朋友也想在这股短视频洪流中分一碗羹&#xff0c;但又苦于技术跟不…

大模型架构创新已死?

金磊 白交 发自 凹非寺 量子位 | 公众号 QbitAI 一场围绕大模型自研和创新的讨论&#xff0c;这两天在技术圈里炸了锅。 起初&#xff0c;前阿里技术VP贾扬清&#xff0c;盆友圈爆料吐槽&#xff1a;有大厂新模型就是LLaMA架构&#xff0c;但为了表示不同&#xff0c;通过改变…

RocketMQ中的消息种类以及消费模式

RocketMQ中的消息种类以及消费模式 前言消息的种类按消息的发送方式同步消息异步消息单向消息 按消息的种类普通消息&#xff08;Normal Message&#xff09;顺序消息&#xff08;Orderly Message&#xff09;延时消息&#xff08;Delay Message&#xff09;事务消息&#xff0…

2023年阿里云服务器购买指南,优惠云服务器性能说明

云服务器作为当下互联网行业的重要基础设施之一&#xff0c;对于个人博客、企业展示型官网以及开发者来说&#xff0c;是必不可少的工具。2023年&#xff0c;阿里云金秋云创季推出了两款特惠的云服务器&#xff0c;为用户提供了更加优惠和实用的选择。 1. 轻量应用服务器2核2G…

除了Excel中可以添加公式之外,在Word中也可以添加公式,不过都是基于表格

公式是必不可少的,因为它们有助于简化任何数学任务。微软的应用程序中有许多数学公式。微软应用程序之一的Word配备了一个公式功能,可以执行各种操作。本文将讨论如何在Word中使用和添加公式。 在Word中,公式主要用于表格。因此,你需要有一个表格才能在Word中使用公式。 …

盘点30个Python树莓派源码Python爱好者不容错过

盘点30个Python树莓派源码Python爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1LA4cLunntKW3qO5aok3xAQ?pwd8888 提取码&#xff1a;8888 项目名称 PiCar-raspber…

2023亚太杯数学建模思路 - 复盘:光照强度计算的优化模型

文章目录 0 赛题思路1 问题要求2 假设约定3 符号约定4 建立模型5 模型求解6 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 问题要求 现在已知一个教室长为15米&#xff0c;宽为12米&…

响应系统的作用与实现

首先讨论什么是响应式数据和副作用函数&#xff0c;然后尝试实现一个相对完善的响应系统。在这个过程中&#xff0c;我们会遇到各种各样的问题&#xff0c;例如如何避免无限递归&#xff1f;为什么需要嵌套的副作用函数&#xff1f;两个副作用函数之间会产生哪些影响&#xff1…

儿童水杯上架亚马逊美国站CPC认证办理 ,常见儿童产品CPC认证测试要求

美国CPSC从2021/03/22开始改革&#xff0c;凡是他们管辖范围内的产品&#xff0c;都会被标记审查&#xff0c;如有相关产品请提前准备好相关文件比如CPC检测报告、认证等等&#xff0c;以备目的港海关审查。 CPC认证介绍 CPC证书即儿童产品证书&#xff0c;适用于12岁以下的儿…

腾讯云新用户优惠券如何领取?详细教程来了!

腾讯云一直致力于为广大用户提供优质、高效的云计算服务。为了吸引新用户&#xff0c;腾讯云推出了新用户专属优惠券&#xff0c;本文将详细介绍如何领取腾讯云新用户优惠券&#xff0c;助力大家轻松上云&#xff01; 一、腾讯云新用户优惠券领取 领券入口&#xff1a;https:/…

人力项目框架解析新增修改方法

在迁移项目但是遇到了一些问题&#xff0c;迁移项目的时候发现项目的整体框架很有趣&#xff0c;但是苦于项目框架太大了&#xff0c;竟然只能完整迁移&#xff0c;做不到部分迁移&#xff0c;于是我也只能从一半的角度来进行解释整个项目。 雇员 我们雇员这个为对象讲解一下…