canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法
项目中引入
npm install html2canvas
html代码
//html代码
js代码
// 引入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项目富文本编辑器vue-quill-editor之自定义图片上传
使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...
在EasyUI项目中使用FileBox控件实现文件上传处理
我在较早之前的随笔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 ...
随机推荐
利用jmSlip写一个移动端顶部日历选择组件
可滚动选日期,并限制哪些日期可选和不可选. 主要用来根据后台返回生成一个日期选择器. 具体实现可关注jmslip: https://github.com/jiamao/jmSlip 示例:http:/ ...
iOS静态库和动态库的区别
一.什么是库? 库是共享程序代码的方式,一般分为静态库和动态库. 静态库:链接时完整地拷贝至可执行文件中,被多次使用就有多份冗余拷贝. 动态库:链接时不复制,程序运行时由系统动态加载到内存,供程序调用 ...
gcc 优化选项 -O1 -O2 -O3 -Os 优先级
http://hi.baidu.com/xiaole10368/item/7cea9b1369cc240db88a1a5c 少优化->多优化: O0 -->> O1 -->&g ...
Matlab与DSP联合开发
1.关于DSP开发环境 刚开始接触TI CCS的时候,用的是CCS2.2,当时CCS2.2又分成4个系列安装包 1.CCS6000 2.CCS5000 3.CCS2000 4.OMAP 都可以单独安装 ...
用Java实现给图片添加文字
package image; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java. ...
tomcat配置详解
Tomcat Server的结构图如下: 该文件描述了如何启动Tomcat Server
PHP之ThinkPHP框架(验证码、文件上传、图片处理)
验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示:
JS获取Dropdownlist选中值
var dropDownList = document.getElementById("ddl_sheng"); //获取DropDownList控件 var dropDownLi ...
LeetCode 544----Output Contest Matches
During the NBA playoffs, we always arrange the rather strong team to play with the rather weak team, ...
gridview 后台增加列
BoundField field1 = null; field1 = new BoundField(); //实例化 field1.HeaderText = "序号";field ...