javascript将html中的dom元素转图片

javascript将html中的dom元素转图片
百度网盘下载html2canvas.min.js:
全部文件-》js插件-》在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页中的某个区域转图片</title></head><body style="margin:0px"><div style="height: 0;overflow: hidden;"><div id="capture" style="padding: 10px; background: #f5da55; width: 500px;">				<table border="1" cellspacing="0" cellpadding="0" width="100%">				<tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td><td>Data</td></tr></table></div></div><img  id="test" alt=""><button type="button" name="button" onclick="convert()">开始生成</button><br><script type="text/javascript" src="html2canvas.min.js"></script><script type="text/javascript">// window.οnlοad=convert();//开始转换function convert() {html2canvas(document.getElementById('capture')).then(canvas => {// document.body.appendChild(canvas)document.getElementById('test').src=canvas.toDataURL();});}</script></body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端--CSS

文章目录 CSS的介绍 引入方式 代码风格 选择器 复合选择器 (选学) 常用元素属性 背景属性 圆角矩形 Chrome 调试工具 -- 查看 CSS 属性 元素的显示模式 盒模型 弹性布局 一、CSS的介绍 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精…

【K8S】集群中部署nginx应用 运行手写yaml文件报错排查过程

文章目录 ❌报错信息&#x1f50e;排查过程✅问题解决 ❌报错信息 提取报错信息【 unknown field “spec.selector.replicas”】【 unknown field “spec.selector.template”】 [rootmaster ~]# kubectl apply -f nginx-deployment.yaml Error from server (BadRequest): erro…

蓝桥杯双周赛算法心得——数树数(dfs)

大家好&#xff0c;我是晴天学长&#xff0c;一个简单的dfs思想&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。 1) .数树数 2) .算法思路 代码的主要逻辑是&#xff1a; 1.使用Scanner读取输入的整数n和q&#xff0c;其中n表示测试用例的数量&am…

数据结构与算法-栈

栈和队列是两种常用的线性结构&#xff0c;属于特殊的线性表&#xff0c;是线性表相关运算的一个子集。一般来说&#xff0c;线性表上的插入和删除操作不受任何限制&#xff0c;但栈只能在表的一端进行插入和删除操作&#xff0c;而队列则只能在一端进行插入操作&#xff0c;在…

MyBatis的缓存,一级缓存,二级缓存

10、MyBatis的缓存 10.1、MyBatis的一级缓存 一级缓存是SqlSession级别的&#xff0c;通过同一个SqlSession对象 查询的结果数据会被缓存&#xff0c;下次执行相同的查询语句&#xff0c;就 会从缓存中&#xff08;缓存在内存里&#xff09;直接获取&#xff0c;不会重新访问…

Centos下编译ffmpeg动态库

文章目录 一、下载ffmpeg安装包二、编译ffmpeg三、安装yasm 一、下载ffmpeg安装包 下载包 wget http://www.ffmpeg.org/releases/ffmpeg-4.4.tar.gz解压 tar -zxvf ffmpeg-4.4.tar.gz二、编译ffmpeg 进入解压的目录 cd ffmpeg-4.4编译动态库 ./configure --enable-shared…

关于pytorch不区分行向量与列向量的理解

听李沐老师讲深度学习时候解释pytorch不区分行向量和列向量&#xff0c;只相当于是一维数组&#xff0c;一维张量一定是行向量&#xff0c;相当于数组&#xff0c;而行列向量可以放到矩阵中看。 测试如下&#xff1a; rtorch.tensor([1,2,3],dtypetorch.float32) print(r,r.T…

Redis五大数据类型的底层设计

SDS 无论是 Redis 的 Key 还是 Value&#xff0c;其基础数据类型都是字符串。虽然 Redis是使用标准 C 语言开发的&#xff0c;但并没有直接使用 C 语言中传统的字符串表示&#xff0c;而是自定义了一 种字符串。这种字符串本身的结构比较简单&#xff0c;但功能却非常强大&…

Master PDF Editor v5.9.70便携版

软件介绍 Master PDF Editor中文版是一款小巧的多功能PDF编辑器,可以轻松查看,创建,修改,批注,签名,扫描,OCR和打印PDF文档.高级注释工具,可以添加任意便笺指示对象突出显示,添加下划线和删除,而无需更改源PDF文件. 软件截图 更新日志 code-industry.net/what-is-new-in-mas…

4.1 继承性

知识回顾 &#xff08;1&#xff09;类和对象的理解&#xff1f; 对象是现实世界中的一个实体&#xff0c;如一个人、一辆汽车。一个对象一般具有两方面的特征&#xff0c;状态和行为。状态用来描述对象的静态特征&#xff0c;行为用来描述对象的动态特征。 类是具有相似特征…

goland 旧版本使用1.19环境

C:\Go\src\runtime\internal\sys\zversion.go // Code generated by go tool dist; DO NOT EDIT.package sysconst StackGuardMultiplierDefault 1const TheVersion go1.19引入其他包的标识符 package mainimport ("fmt""gotest/test")func main() {f…

Flask (Jinja2) 服务端模板注入漏洞复现

文章目录 Flask (Jinja2) 服务端模板注入漏洞1.1 漏洞描述1.2 漏洞原理1.3 漏洞危害1.4 漏洞复现1.4.1 漏洞利用 1.5 漏洞防御 Flask (Jinja2) 服务端模板注入漏洞 1.1 漏洞描述 说明内容漏洞编号漏洞名称Flask (Jinja2) 服务端模板注入漏洞漏洞评级高危影响版本使用Flask框架…

Linux友人帐之调试器--gdb的使用

一、debug和realease版本的区别 区别 debug是给程序员用的版本&#xff0c;添加了调试信息&#xff0c;用于解决软件或程序中出现的问题&#xff0c;realease是发行给客户使用的版本&#xff0c;并未添加调试信息&#xff0c;只需要给客户提供优越的产品使用环境即可&#xff…

数据库系统概论学习 1 绪论

1.1.1 数据、数据库、数据库管理系统、数据库系统 一、数据 Data 数据是数据库中存储的基本对象 定义&#xff1a;描述事物的符号记录称为数据&#xff0c;描述事物的符号可以是数字、文字、图像、图形、声音、语言等表现形式&#xff0c;它们都可以经过数字化后存入计算机。…

【C++进阶】:C++类型转换

C类型转换 一.C语言里的类型转换二.C语音类型转换的一些弊端三.C的四种类型转换1.static_cast2.reinterpret_cast3.const_cast4.dynamic_cast 一.C语言里的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或者…

ST‐LINK V2 使用说明(安装,调试,烧录)

目录 1. 初识 ST-LINK V2 1.1 ST-LINK V2 简介 2. ST-LINK V2 驱动的安装与固件升级 2.1 驱动的安装 2.2 固件的升级 3. 使用 STM32 ST-LINK Utility 烧写目标板 hex 3.1 ST-LINK 烧写 hex 文件 4.使用 ST-LINK V2 调试 STM8 4.1 ST‐LINK 调试 STM8 5.…

String方法:分割、梦回C语言,格式化输出format

String poem "锄禾日当午&#xff0c;汗滴禾下土&#xff0c;谁知盘中餐&#xff0c;粒粒皆辛苦";String[] split poem.split("&#xff0c;");System.out.println("悯农");for (int i 0; i < split.length; i) {System.out.println(split…

53 打家劫舍

打家劫舍 题解1 DP1题解2 DP2 &#xff01;经典DP&#xff01; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果 两间相邻的房屋在同一晚上被小偷闯入…

【C++】继承 -- 详解

一、继承的概念及定义 1、继承的概念 继承 (inheritance) 机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保 持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。 继承呈现了面向对象 程序设…

【Vue】vue2与netcore webapi跨越问题解决

系列文章 C#底层库–记录日志帮助类 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/124187709 文章目录 系列文章前言一、技术介绍二、问题描述三、问题解决3.1 方法一&#xff1a;前端Vue修改3.2 方法二&#xff1a;后端允许Cors跨越访问 四、资源…