今天项目中有个需求,需要将页面的一部分转为图片,相当于存证之类的

然后我查阅了下百度,发现了几种可行的方法,特此来记录下

1.html2canvas插件

安装:npm install --save html2canvas

然后在指定的位置引入

使用:

html2canvas(this.$refs.imageDom, {
width: this.$refs.imageDom.clientWidth, //dom 原始宽度
height: this.$refs.imageDom.clientHeight,
allowTaint: true, //允许污染
taintTest: true, //在渲染前测试图片
// useCORS: true, //开启跨域配置,但和allowTaint不能共存
}.then(img => {

});

注意点

这个里面一些css样式是不支持的,然后出现空白啥的就更换css样式,如果图片超过一个屏幕的高度,需要加上 window.scroll(0,0)

这个项目是我接手的别人的项目,然后本地运行是没有问题的,然后上线之后就会出现图片偏移这个说法,这个项目用的是gulp打包,我至今没有解决,如果有其他大佬知道的话,麻烦告诉我一下

还有一些页面加载的时候可能页面没加载完成就生成了图片可以加一个定时器

2.dom-to-image

安装:npm install dom-to-image

在指定页面引入

这个使用的时候相当简单,有几个常用的api

domtoimage.toPng(...);将节点转化为png格式的图片

domtoimage.toJpeg(...);将节点转化为jpg格式的图片

domtoimage.toSvg(...);将节点转化为svg格式的图片,生成的图片的格式都是base64格式。

domtoimage.toBlob(...);将节点转化为二进制格式,这个可以直接将图片下载,是不是非常方便

domtoimage.toPixelData(...);获取原始像素值,以Uint8Array 数组的形式返回,每4个数组元素表示一个像素点,即rgba值。这个方法也是挺实用的,可以用于WebGL中编写着色器颜色。

domtoimage 主要的属性有:

filter : 过滤器节点中默写不需要的节点;

bgcolor : 图片背景颜色;

height, width : 图片宽高;

style :传入节点的样式,可以是任何有效的样式;

quality : 图片的质量,也就是清晰度;

cacheBust : 将时间戳加入到图片的url中,相当于添加新的图片;

imagePlaceholder : 图片生成失败时,在图片上面的提示,相当于img标签的alt;

评价自己

这个的话相对简单一点没有出现错位的图,我因为那个没有解决所以就换了一种方法,不是我不解决,我那个看了一天实在是我菜,然后没解决,没办法只能想其他方法,这个办法相对比较好,通俗易懂

 

vue中dom节点转图片的更多相关文章

  1. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  2. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  3. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  4. 转:ie6与firefox操作iframe中DOM节点的一点不同

    依次在两个浏览器中运行以下代码 <html> <body> <iframe id="myiframe"></iframe> < ...

  5. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  6. vue中添加文字或图片水印

    首先引用warterMark.js,内容如下 'use strict' var watermark = (className,str,type) => { let dom = document. ...

  7. vue中如何动态的绑定图片,vue中通过data返回图片路径

    在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:

  8. 在vue中通过js动态控制图片按比列缩放

    1.html 通过外层的div来给img对应的class,隐藏的img是得到img图片请求回来时的原始尺寸.外层div是固定大小,因此,图片有两种情况去适应外部div的尺寸.一种是宽度大于高度的情况, ...

  9. vue中动态加载图片路径的方法

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

随机推荐

  1. WinDBG 调试命令大全

    转载收藏于:http://www.cnblogs.com/kekec/archive/2012/12/02/2798020.html  #调试命令窗口 ++++++++++++++++++++++++ ...

  2. Java发送邮件报错:com.sun.mail.util.LineOutputStream.<init>(Ljava/io/OutputStream;Z)V

    在练习使用Java程序发送邮件的代码 运行出现了com.sun.mail.util.LineOutputStream.<init>(Ljava/io/OutputStream;Z)V报错信 ...

  3. 简述MySQL优化

    数据库的优化可以从四个方面来优化: 1.结构层: web服务器采用负载均衡服务器,mysql服务器采用主从复制,读写分离 2.储存层: 采用合适的存储引擎,采用三范式 3.设计层: 采用分区分表,索引 ...

  4. 一文带你详细介绍c++中的std::move函数

    前言 在探讨c++11中的Move函数前,先介绍两个概念(左值和右值) 左值和右值 首先区分左值和右值 左值是表达式结束后依然存在的持久对象(代表一个在内存中占有确定位置的对象) 右值是表达式结束时不 ...

  5. JavaWeb——MySQL多表

    内容索引 1. 多表查询 2. 事务 3. DCL 多表查询: * 查询语法: select 列名列表 from 表名列表 where.... * 准备sql # 创建部门表 CREATE TABLE ...

  6. c++通讯录管理系统

    代码拷贝 #include<iostream> #include<string> #include<stdlib.h> #define MAX 1000 using ...

  7. Go的Waitgroup和锁

    学 Go 的时候知道 Go 语言支持并发,最简单的方法是通过 go 关键字开启 goroutine 即可.可在工作中,用的是 sync 包的 WaitGroup,然而这样还不够,当多个 gorouti ...

  8. phpstudy2018 开启目录浏览

    废话不多说直接开始 一.打开 vhosts-ini 配置文件 二.加入以下内容  注意填写自己的网站根目录 <Directory "你自己的网站根目录"> Option ...

  9. 干货!可以使用低代码平台代替Excel吗?

    低代码开发平台可以代替Excel?不用惊讶,答案是肯定的,而且,低代码开发平台可以完全代替Excel.例如Zoho Creator低代码平台,可以围绕数据存储.管理和创建工作流程.期间不需要IT人员介 ...

  10. 前端必读:Vue响应式系统大PK(下)

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vue-3-reactivity-system ...