在Vue项目中使用html2canvas生成页面截图并上传
项目中引入
html代码
//html代码
<!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref -->
<div class="image_tofile" ref="imageTofile">
<!-- 这里放需要截图的元素,自定义组件元素也可以 -->
</div> <!-- 如果需要展示截取的图片,给一个img标签 -->
<img :src="htmlUrl">
// 引入html2canvas
import html2canvas from 'html2canvas' // 注册组件
components: {
html2canvas
}, data () {
return {
htmlUrl: ''
}
}, mounted () {
// 如果页面一加载就需要生成图片,就在mounted里调用方法,给一个setTimeout,保证页面元素已存在
setTimeout(this.toImage, 500) },
methods: {
// 页面元素转图片
toImage () {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
this.htmlUrl = url
// 把生成的base64位图片上传到服务器,生成在线图片地址
this.sendUrl()
})
}, // 图片上传服务器
sendUrl () {
// 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
const formData = new FormData()
formData.append('base64', this.company.fileUrl)
formData.append('userId', 123)
formData.append('pathName', 'pdf')
this.$ajax({
url: apiPath.common.uploadBase,
method: 'post',
data: formData
}).then(res => {
if (res.code && res.data) { }
})
}
}
OK 大功告成O(∩_∩)O哈哈~
在Vue项目中使用html2canvas生成页面截图并上传的更多相关文章
- vue项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
- 在EasyUI项目中使用FileBox控件实现文件上传处理
我在较早之前的随笔<基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用>Web框架介绍中介绍了基于Uploadify的文件上传操作,免费版本用的是J ...
- vue项目中利用popstate处理页面返回操作
需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- Vue项目中设置每个单页面的标题
两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{ path: '/', name: ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
随机推荐
- C#开发重用方法
获取类型先关信息 GetType()及typeof()
- SAC学习笔记(一)——SAC安装
1.软件包申请 地址: http://www.iris.edu/forms/sac_request.htm 其中的表单需要正确认真填写,选择你所需要的系统平台Linux.Mac OS.Sol ...
- UVa 11324 The Largest Clique (强连通分量+DP)
题意:给定一个有向图,求一个最大的结点集,使得任意两个结点,要么 u 能到 v,要么 v 到u. 析:首先,如果是同一个连通分量,那么要么全选,要么全不选,然后我们就可以先把强连通分量先求出来,然后缩 ...
- thinkphp5网站中集成使用支付宝手机支付接口
今天以thinkphp5中使用支付宝的手机支付接口为例. 一.创建基本页面pay/alipay_wap_submit.php(开始创建订单) <!DOCTYPE html> <htm ...
- iOS基础教程:在建好的项目中加入CoreData[转]
这几天在做一个ios的小项目,项目中需要对数据进行基本的增删改查操作.于是就想用一把CoreData.但在创建项目初期,没有包含进CoreData.于是就在已建好的项目中加入CoreData.由于第一 ...
- 10、Semantic-UI之图片的使用
10.1 图片的使用 定义有边框的图片样式 <img class="ui medium bordered image" src="../images/pic.png ...
- memcached整理の分布式集群算法
memcached如何实现分布式? memcached是一个“分布式内存对象缓存系统”,然而memcached并不像mongodb那样,允许配置多个节点,且节点之间“自动分配数据”,就是说memcac ...
- Winform Log4net 配置写不同文件
以下配置了二种写文件,第一种根据日期写文件yyyyMMdd.txt,第二种是写固定文件login.txt. 1, 下载Log4net组件: http://logging.apache.org/log4 ...
- on where having总结
1. ON 和WHERE 所有的查询都回产生一个中间临时报表,查询结果就是从返回临时报表中得到.ON和WHERE后面所跟限制条件的区别,主要与限制条件起作用的时机有关, ON根据限制条件对数据库记录进 ...
- [转]解读Unity中的CG编写Shader系列6——不透明度与混合
1.不透明度当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们已经知道了片段着色器以及后面的环节的主要工作是输出颜色与深度到帧缓存中,所以两个纹理在每个像素上的颜色到 ...