canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法
項(xiàng)目中引入
npm install html2canvas
html代碼
//html代碼
js代碼
// 引入html2canvas
import html2canvas from 'html2canvas'
// 注冊(cè)組件
components: {
html2canvas
},
data () {
return {
htmlUrl: ''
}
},
mounted () {
// 如果頁面一加載就需要生成圖片,就在mounted里調(diào)用方法,給一個(gè)setTimeout,保證頁面元素已存在
setTimeout(this.toImage, 500)
},
methods: {
// 頁面元素轉(zhuǎn)圖片
toImage () {
// 第一個(gè)參數(shù)是需要生成截圖的元素,第二個(gè)是自己需要配置的參數(shù),寬高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 如果截圖的內(nèi)容里有圖片,可能會(huì)有跨域的情況,加上這個(gè)參數(shù),解決文件跨域問題
}).then((canvas) => {
let url = canvas.toDataURL('image/png')
this.htmlUrl = url
// 把生成的base64位圖片上傳到服務(wù)器,生成在線圖片地址
this.sendUrl()
})
},
// 圖片上傳服務(wù)器
sendUrl () {
// 如果圖片需要formData格式,就自己組裝一下,主要看后臺(tái)需要什么參數(shù)
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項(xiàng)目富文本編輯器vue-quill-editor之自定義圖片上傳
使用富文本編輯器的第一步肯定是先安裝依賴 npm i?vue-quill-editor 1.如果按照官網(wǎng)富文本編輯器中的圖片上傳是將圖片轉(zhuǎn)為base64格式的,如果需要上傳圖片到自己的服務(wù)器,需要修改 ...
在EasyUI項(xiàng)目中使用FileBox控件實(shí)現(xiàn)文件上傳處理
我在較早之前的隨筆Web框架介紹中介紹了基于Uploadify的文件上傳操作,免費(fèi)版本用的是J ...
vue項(xiàng)目中利用popstate處理頁面返回操作
需求背景:項(xiàng)目中需要做一個(gè)返回確認(rèn),避免用戶誤觸返回鍵而退出當(dāng)前頁面. 原理:利用history和瀏覽器刷新popstate狀態(tài) 實(shí)現(xiàn): 1.在mounted() 階段判斷并添加popstate事件監(jiān) ...
在vue項(xiàng)目中添加一個(gè)html頁面,開啟本地服務(wù)器
在vue項(xiàng)目里新增一個(gè)不需要登錄的頁面,那么我只能新增一個(gè)html頁面了,不經(jīng)過路由,直接在瀏覽器輸入路徑打開,那么就需要用到本地服務(wù)器, 1.vue里面的html頁面最好放過在public文件夾里面 ...
Vue項(xiàng)目中設(shè)置每個(gè)單頁面的標(biāo)題
兩種實(shí)現(xiàn)方法,第一種方法引入插件,第二種為編程方式實(shí)現(xiàn)(推薦) 首先在路由文件index.js中給每個(gè)單頁面路由添加title routes: [{ ????path: '/', ????name: ...
vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁面
前言: 在Vue項(xiàng)目中,當(dāng)訪問的頁面路由不存在或錯(cuò)誤時(shí),頁面顯示為一片空白.然而,通常我們需要對(duì)訪問url不存在或者錯(cuò)誤的情況下添加默認(rèn)的404頁面,即not found頁面. 一般的處理方法是: 在 ...
解決在Vue項(xiàng)目中時(shí)常因?yàn)榇a縮進(jìn)導(dǎo)致頁面報(bào)錯(cuò)的問題
前言 如果我們初次使用vue-cli來構(gòu)建單頁SPA應(yīng)用,在擼代碼的過程中有可能會(huì)遇到這種因?yàn)榇a縮進(jìn)導(dǎo)致 頁面報(bào)錯(cuò)的問題,導(dǎo)致我們煩不勝煩.接下來我們就來看一看如何解決這個(gè)小問題... erro原因 ...
vue 項(xiàng)目中如何在頁面刷新的狀態(tài)下保留數(shù)據(jù)
1.問題:在vue項(xiàng)目中,刷新頁面之后,我當(dāng)前打開的所有菜單,都消失,我如何實(shí)現(xiàn)刷新之后頁面仍然是刷新之前的狀態(tài) 效果圖: 解決方法: 使用vuex作狀態(tài)管理: 將vuex里面的數(shù)據(jù)同步更新到loca ...
VUE項(xiàng)目中使用this.$forceUpdate();解決頁面v-for中修改item屬性值后頁面v-if不改變的問題
VUE項(xiàng)目中使用this.$forceUpdate();解決頁面v-for中修改item屬性值后頁面v-if不改變的問題:https://blog.csdn.net/jerrica/article/d ...
隨機(jī)推薦
利用jmSlip寫一個(gè)移動(dòng)端頂部日歷選擇組件
可滾動(dòng)選日期,并限制哪些日期可選和不可選. 主要用來根據(jù)后臺(tái)返回生成一個(gè)日期選擇器. 具體實(shí)現(xiàn)可關(guān)注jmslip:?https://github.com/jiamao/jmSlip 示例:http:/ ...
iOS靜態(tài)庫和動(dòng)態(tài)庫的區(qū)別
一.什么是庫? 庫是共享程序代碼的方式,一般分為靜態(tài)庫和動(dòng)態(tài)庫. 靜態(tài)庫:鏈接時(shí)完整地拷貝至可執(zhí)行文件中,被多次使用就有多份冗余拷貝. 動(dòng)態(tài)庫:鏈接時(shí)不復(fù)制,程序運(yùn)行時(shí)由系統(tǒng)動(dòng)態(tài)加載到內(nèi)存,供程序調(diào)用 ...
gcc 優(yōu)化選項(xiàng) -O1 -O2 -O3 -Os 優(yōu)先級(jí)
http://hi.baidu.com/xiaole10368/item/7cea9b1369cc240db88a1a5c 少優(yōu)化->多優(yōu)化: O0 -->> O1 -->&g ...
Matlab與DSP聯(lián)合開發(fā)
1.關(guān)于DSP開發(fā)環(huán)境 剛開始接觸TI?CCS的時(shí)候,用的是CCS2.2,當(dāng)時(shí)CCS2.2又分成4個(gè)系列安裝包?1.CCS6000?2.CCS5000?3.CCS2000?4.OMAP 都可以單獨(dú)安裝 ...
用Java實(shí)現(xiàn)給圖片添加文字
package image; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java. ...
tomcat配置詳解
Tomcat Server的結(jié)構(gòu)圖如下: 該文件描述了如何啟動(dòng)Tomcat Server ????????
PHP之ThinkPHP框架(驗(yàn)證碼、文件上傳、圖片處理)
驗(yàn)證碼 驗(yàn)證碼是框架自帶有的,比之前使用GD庫簡(jiǎn)單方便許多,其實(shí)現(xiàn)原理基本相似,都是生成圖片,保存驗(yàn)證碼值到Session中,表單提交驗(yàn)證碼,然后進(jìn)行值的對(duì)比驗(yàn)證. 簡(jiǎn)單的顯示:
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 后臺(tái)增加列
BoundField?field1?=?null; field1?=?new?BoundField();??//實(shí)例化 field1.HeaderText?=?"序號(hào)";field ...
總結(jié)
以上是生活随笔為你收集整理的canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java中实现选择文件_Java 实现文
- 下一篇: 2022-2028年中国金融安防行业深度