Dom 元素转换 Image 图片 (截图)
Dom 元素转换 Image 图片 (截图)
dom-to-image
dom-to-image NPM 官网文档
参考文章@码上行舟
dom-to-image 是如何将 html 转换成图片的(文章参考)
安装
npm install dom-to-image --save
使用
/* in ES 6 */
import domtoimage from "dom-to-image";
/* in ES 5 */
var domtoimage = require("dom-to-image");var node = document.getElementById("my-node"); // 获取需要转换成图片的dom元素domtoimage.toPng(node).then(function (dataUrl) {var img = new Image();img.src = dataUrl;document.body.appendChild(img);}).catch(function (error) {console.error("oops, something went wrong!", error);});
案例解释
vue2 项目,复制代码即可看见效果
<template><div class="container"><el-tableclass="tableDom"ref="tableRef":data="tableData"style="width: 100%"border><el-table-column type="selection" width="55"> </el-table-column><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="sex" label="性别" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><div style="background: tomato; width: 100%"><img :src="imageUrl" alt="" /></div></div>
</template><script>import domtoimage from "dom-to-image";export default {name: "Helloworld",mounted() {let tableDom = document.querySelector(".tableDom");this.domShot(tableDom);},data() {return {imageUrl: "",tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-01",name: "王小虎",sex: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {domShot(dom) {domtoimage.toPng(dom, { quality: 0.92 }).then((dataUrl) => {//保存图片this.imageUrl = dataUrl;});},},};
</script><style lang="scss" scoped></style>
dom-to-image 部分方法封装
import domtoimage from "dom-to-image";// dom截图
domShot(dom) {domtoimage.toPng(dom, { quality: 0.92 }).then((dataUrl) => {//保存图片let saveFile = (data, filename) => {let img = new Image();img.src = data;img.onload = () => {// 缩放图片const dataUrl = this.scalcImage(img);this.download(dataUrl, filename);};};saveFile(dataUrl, this.getFilename());});
},
// 下载图片
download(dataUrl, filename) {var blob_ = this.data_to_blob(dataUrl); // 转换为 blobvar link = document.createElement("a");link.setAttribute("href", window.URL.createObjectURL(blob_));link.setAttribute("download", filename);link.click();
},
// 缩放图片到0.8
scalcImage(img) {var canvas = document.createElement("canvas"); // 创建canvas元素var scale = 0.8;var width = img.width * scale; // 确保canvas的尺寸和图片一样var height = img.height * scale;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(img, 0, 0, width, height); // 将图片绘制到canvas中const dataUrl = canvas.toDataURL("image/png"); // 转换图片为dataURLreturn dataUrl;
},
// 获得文件名
getFilename() {//获取年月日作为文件名const timers = new Date();const fullYear = timers.getFullYear();const month = timers.getMonth() + 1;const date = timers.getDate();const randoms = Math.random() + "";//年月日加上随机数let numberFileName =fullYear + "" + month + date + randoms.slice(3, 10);return numberFileName + '.png'
}
html2canvas
npm 官网文档
中文文档
安装
npm install html2canvas --save
使用
import html2canvas from "html2canvas";
html2canvas(dom).then((canvas) => {this.download(canvas.toDataURL("image/png"), this.getFilename());
});
相关文章:
Dom 元素转换 Image 图片 (截图)
Dom 元素转换 Image 图片 (截图) dom-to-image dom-to-image NPM 官网文档 参考文章码上行舟 dom-to-image 是如何将 html 转换成图片的(文章参考) 安装 npm install dom-to-image --save 使用 /* in ES 6 */ import domtoimage from "dom-to-image"; /* in ES 5 *…...
零售业务产品系统应用架构设计(二)
ETC信用结算系统根据《加快推进高速公路电子不停车快捷收费应用服务实施方案》(发改基础〔2019〕935号),拓宽ETC发行服务渠道。推动建立全网协同服务模式,完善服务规则,鼓励银行业金融机构、非银行支付机构和互联网企业等服务机构紧密合作。允许ETC绑定既有银行账户和支付…...
Linux速成入门教程——从零基础开始快速入门,一文了解Linux用户管理与权限
2.1 用户与组管理 用户与组的基本概念 在Linux系统中,用户和组是管理权限和资源访问的基本单元。每个用户都有一个唯一的用户ID(UID),每个组都有一个唯一的组ID(GID)。用户可以属于一个或多个组ÿ…...
网工内推 | 宁德时代IT运维,晋升空间大,带薪年假,包吃包住
01 宁德时代 🔷招聘岗位:IT运维服务 🔷任职要求 1、大专及以上学历专业不限,应届毕业生或计算机、网络维护等相关专业优先; 2、具备较强的服务意识和良好的语言表达能力、沟通能力、记忆能力、心理承受能力和学习能力…...
Linux---系统安全
文章目录 系统安全系统账号清理密码安全控制命令历史限制终端自动注销如设置时间短的处理方式 使用su命令切换用户用途及用法密码验证限制使用su命令的用户查看su操作记录限制使用su命令的用户查看su操作记录su命令的安全隐患 PAM(Pluggable Authentication Modules)可插拔式认…...
手写数字识别实战
全部代码: import matplotlib.pyplot import torch from torch import nn # nn是完成神经网络相关的一些工作 from torch.nn import functional as F # functional是常用的一些函数 from torch import optim # 优化的工具包import torchvision from matplotlib …...
二叉树遍历
二叉树的遍历是二叉树操作中的一个基本且重要的概念,它指的是按照一定的规则访问二叉树中的每个节点,并且每个节点仅被访问一次。常见的二叉树遍历方式有四种:前序遍历(Pre-order Traversal)、中序遍历(In-…...
uni app 调用前置摄像头
uniapp开发app并没有相关Api调用前置摄像头。只能使用5app的api 调用前置摄像头拍照 plus.camera.getCamera(index) 获取需要操作的摄像头对象,如果要进行拍照或摄像操作,需先通过此方法获取摄像头对象 index指定要获取摄像头的索引值,1表…...
哈工大李治军老师OS课程笔记(4)——内存管理
一 内存使用与分段(实验六) 内存是如何用起来的? 内存使用:将程序放在内存中,PC指向开始地址 重定位:修改程序中的地址(是相对地址) 什么时候完成重定位? 编译时加基址…...
代码随想录算法训练营第43天:动态规划part10:子序列问题
300.最长递增子序列 力扣题目链接(opens new window) 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2…...
传智教育引通义灵码进课堂,为技术人才教育学习提效
7 月 17 日,阿里云与传智教育在阿里巴巴云谷园区签署合作协议,双方将基于阿里云智能编程助手通义灵码在课程共建、品牌合作及产教融合等多个领域展开合作,共同推进 AI 教育及相关业务的发展,致力于培养适应未来社会需求的高素质技…...
企业信息化建设搞得好了叫系统工程,搞不好叫面子工程
2024-06-13 09:26贝格前端工场...
程序员如何平衡日常编码工作与提升式学习?
在快速变化的编程领域中,平衡日常编码工作与个人成长确实是一个重要且富有挑战性的议题。以下是我对这一问题的看法和建议: 1. 认识到平衡的重要性 首先,理解两者之间的平衡并非零和游戏,而是相辅相成的。高效的编码工作能够为个…...
Linux---文件系统和日志分析
文章目录 文件系统和日志分析inode和block概述inode包含文件的元信息用stat命令可以查看某个文件的inode信息Linux系统文件三个主要的时间属性 目录文件的结构用户通过文件名打开文件时,系统内部的过程查看inode号码的方法硬盘分区后的结构访问文件的简单流程inode的…...
MySQL 体系架构
文章目录 一. MySQL 分支与变种1. Drizzle2. MariaDB3. Percona Server 二. MySQL的替代1. Postgre SQL2. SQLite 三. MySQL 体系架构1.连接层2 Server层(SQL处理层)3. 存储引擎层1)MySQL官方存储引擎概要2)第三方引擎3࿰…...
跨站脚本攻击漏洞
1.JavaScript JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D动画,滚动播放的视频等等。 &a…...
RabbitMQ入门与进阶
RabbitMQ入门与进阶 基础篇1. 为什么需要消息队列?2. 什么是消息队列?3. RabbitMQ体系结构介绍4. RabbitMQ安装5. HelloWorld6. RabbitMQ经典用法(工作模式)7. Work Queues8. Publish/Subscribe9. Routing10. Topics 进阶篇1. RabbitMQ整合SpringBoot2. 消息可靠性投递故障情…...
Unity新输入系统 之 InputActions(输入配置文件)
本文仅作笔记学习和分享,不用做任何商业用途 本文包括但不限于unity官方手册,unity唐老狮等教程知识,如有不足还请斧正 首先你应该了解新输入系统的基本单位Unity新输入系统 之 InputAction(输入配置文件最基本的单位࿰…...
Linux运维篇-误删/bin,/sbin目录怎么修复系统
这里写自定义目录标题 前言实例挂载镜像,重启系统进入救援模式拷贝镜像系统中的/bin和/sbin目录到原系统重启系统 总结 前言 当你看到这篇文章的时候,你的系统可能已经无法登录,或者正在处于登录状态但是不能执行任何常规的命令,…...
构建高效外贸电商系统的技术探索与源码开发
在当今全球化的经济浪潮中,外贸电商作为连接国内外市场的桥梁,其重要性日益凸显。一个高效、稳定、功能全面的外贸电商系统,不仅能够助力企业突破地域限制,拓宽销售渠道,还能提升客户体验,增强品牌竞争力。…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代,情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现,消费者对内容的“有感”程度,正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
