使用方法

項(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。