Vue使用html2canvas将页面转化为图片
需求是微信端将页面截屏之后保存到本地,使用了html2canvas插件
先引入插件
npm install --save html2canvas
之后在你所需要使用的页面引入
import html2canvas from "html2canvas"
先来看html页面
<div ref="imageWrapper"> <div class="success"> <div class="img"> <img class="img-icon" src="../assets/success.png"/> <p style="font-weight: 600; font-size: 18px">支付成功</p> </div> </div> <div class="success-detail"> <el-row style="margin-top: 10px;"> <el-col :span="5" class="col-left-suc">收款商家</el-col> <el-col :span="16" class="col-right">{{merchant}}</el-col> </el-row> <el-row style="margin-top: 10px;"> <el-col :span="5" class="col-left-suc">费用名称</el-col> <el-col :span="16" class="col-right">{{contName}}</el-col> </el-row> <el-row style="margin-top: 10px;"> <el-col :span="5" class="col-left-suc">缴费金额</el-col> <el-col :span="16" class="col-right">{{chargePrice}}元</el-col> </el-row> </div> </div> <div class="button"> <el-button style="width: 70%;" type="success" size="small" @click="toImage">生成截图</el-button> </div>
vue中用ref来指定你需要截屏的dom
再来看js
toImage() { html2canvas(this.$refs.imageWrapper).then(canvas => { let dataURL = canvas.toDataURL("image/png"); this.imgUrl = dataURL; if (this.imgUrl !== "") { this.dialogTableVisible = true; } }); }
Vue使用html2canvas将页面转化为图片的更多相关文章
- vue的html2canvas将dom转化为图片时踩得坑
一.html2canvas中图片涉及跨域图片 应用场景:做个投票活动,将参赛者的信息转化成图片截图分享.用户上传图片上传到腾讯云cos桶中,html2canvas只能转换本地资源的图片,涉及跨域的图片 ...
- vue 使用html2canvas将DOM转化为图片
一.前言 我发现将DOM转化为图片是一个非常常见的需求,而自己手动转是非常麻烦的,于是找到了html2canvas这个插件,既是用得比较多的也是维护得比较好的一个插件. 注意:版本比较多,这里介绍最新 ...
- 把html页面转化成图片——html2canvas
test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...
- 将jsp页面转化为图片或pdf升级版(一)(qq:1324981084)
java高级架构师全套vip教学视频,需要的加我qq1324981084 前面我利用httputil将jsp转化为html,之后转化为pdf,但我发现这样错误率比较高,且成功后有得图片没有完全形成.所 ...
- 将jsp页面转化为图片或pdf(一)
在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是itext所不识别的,所以努力了一段时间后就放弃了,后来发现htmlutil抓 ...
- hml页面转化成图片
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
- vue 打包后,页面空白及图片路径的问题
打包之后打开dist的页面显示空白: 1.记得改一下config下面的index.js中bulid模块导出的路径. 这里需要将 assetsPublicPath: '/'改为assetsPublicP ...
- 将jsp页面转化为图片或pdf升级版(二)(qq:1324981084)
java高级架构师全套vip教学视频,需要的加我qq1324981084 上面我们已经将jsp页面转化成html页面了,那么接下来我们的目标是利用这个html页面形成pdf或图片格式.这里我用到的是w ...
- 将jsp页面转化为图片或pdf(一)(qq:1324981084)
java高级架构师全套vip教学视频,需要的加我qq1324981084 在项目中遇见了将jsp页面转化为pdf的问题,试过itext,但是itext需要标准的html代码,我的页面中的一些属性是it ...
随机推荐
- Struts2输入错误处理
1.Action类继承ActionSupport父类,将result的name属性设置为<result name="input">/inputError.jsp< ...
- CCF201609-1 最大波动 java (100分)
试题编号: 201609-1 试题名称: 最大波动 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 小明正在利用股票的波动程度来研究股票.小明拿到了一只股票每天收盘时的价格,他 ...
- mysql批量替换某个字段的部分内容
举例说明 有数据表person,结构如下 id name urls 1 张三 xh.jpg 2 李四 xh.jpg 3 王五 3.jpg 需求:将urls字段中的xh替换为id字段的值 语句: UPD ...
- 【jenkins】UnicodeEncodeError: 'ascii' codec can't encode character
https://stackoverflow.com/questions/6076203/how-do-you-set-the-default-encoding-in-jenkins
- String HDU 5672(双指针)
String HDU 5672(双指针) 传送门 题意:一个字符串中找到所有拥有不少于k个不同的字符的子串. import java.io.*; import java.util.*; public ...
- Eclipse 导出的jar包 , 使用后提示重复定义?
导出jar包时,一般会指定一个路径,导出的完整jar包就会自动放到那个指定路径里. 后来我发现那个指定路径的jar包比bin文件夹里面的jar包大,于是就用bin文件夹里面的jar包代替来试试,果然不 ...
- ceph rbd 入门
1.一个现成的ceph cluster 参考之前写的ceph-deploy 部署ceph cluster 2.配置client与ceph cluster对接 在ceph cluster的管理节点上安装 ...
- noip模拟赛 排列
[问题描述] 给出一个随机的排列,请你计算最大值减最小值的差小于等于0~n-1的区间分别有多少个. 输入格式 输入文件名为sum.in. 第一行一个数T(<=10),表示数据组数 对于每一组数据 ...
- CF578D. LCS Again
n<=100000个字符的小写字母串,问用前m<=26个小写字母能拼出多少个和原串lcs=n-1的字符串. 首先把字符串划分成若干个连续相同的段,如aaa|bb|c|dd,然后题目即要求从 ...
- P1516 青蛙的约会 洛谷
https://www.luogu.org/problem/show?pid=1516 题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上, ...