dom截图的几种实现方式

前端要实现dom截图的功能，现在比较常用的是使用以下两个库

dom-to-image 使用svg技术实现
html2canvas 使用canvas技术实现

如果想自己写一个dom截图的可以参考

dom-pointer 代码比较简单，非常适合拿来研究
rasterizeHTML.js 目前rasterizeHTML.js已经被用于知乎-意见反馈功能。

两种截图方式

SVG 效率高
dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。
Canvas
html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

dom-to-image

个人认为这个库比较好用

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"></script>

vue实现

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

<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

import html2canvas from 'html2canvas';
html2canvas(dom).then((canvas) => {this.download(canvas.toDataURL("image/png"), this.getFilename())
})

dom截图的几种实现方式相关推荐

在Windows 10中截取截图的6种方式简介
在Windows 10中截取截图的6种方式简介截图对于不同的目的很重要.它可以用于捕获笔记本电脑上的任何内容的截图.所以,如果你使用Windows 10,你可能不知道如何截图,因为它是比较新的.因 ...
计算机图片怎么截图快捷键,电脑截图快捷键四种截屏方式,笔记本电脑如何截屏截图？...
电脑截图快捷键四种截屏方式,笔记本电脑如何截屏截图? 网际百科资讯知识宝库 2020-3-18 43955 0评论电脑截图快捷键四种截屏方式,笔记本电脑如何截屏截图?给你推 ...
在电脑屏幕上截图的5种方式
在电脑屏幕上截图的5种方式第一种:Ctrl + PrScrn 使用这个组合键截屏,获得的是整个屏幕的图片,截取后ctrl+v键可直接在文档中保存.Alt + PrScrn 这个组合键截屏,获得的结果 ...
Android中实现截图的几种方式
一.起始原因最近项目需求中需要实现屏幕截图,开启了新一轮的翻腾,找寻.是的,我就是一个搬运工,简单的搬运工~~做不完的功能,连接不断地需求~~ 基本需求:实现当前页面截图并保存: 扩展需求:截图去除 ...
js循环nodelist_JS循环Nodelist Dom列表的4种方式
这次给大家带来JS循环Nodelist Dom列表的4种方式,JS循环Nodelist Dom列表的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了原生JS实现循环Nodelist D ...
Java多线程的11种创建方式以及纠正网上流传很久的一个谬误
创建线程比较传统的方式是继承Thread类和实现Runnable,也可以用内部类,Lambda表达式,线程池,FutureTask等. 经常面试会问到继承Thread类和实现Runnable的区别,然 ...
php xml 四种,xml中常见的四种解析方式是什么？
xml解析方式有:1.DOM解析方法,可以对xml文档进行修改操作:2.SAX解析方法,解析速度快,占用内存少:3.JDOM解析方法,查找方便:4.DOM4J解析方法,解析XML的速度快. 在XML的 ...
组件Refs(操作DOM的2⃣️两种方法)
组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.lo ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

dom截图的几种实现方式

两种截图方式

dom-to-image

html2canvas

dom截图的几种实现方式相关推荐

最新文章

热门文章