Vue引入sign-canvas實現(xiàn)簽名畫板效果
更新時間:2023年03月27日 10:32:35 作者:HqL丶1024
這篇文章主要介紹了Vue引入sign-canvas實現(xiàn)簽名畫板,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
Vue引入sign-canvas實現(xiàn)簽名畫板
效果圖
1.安裝
npm i sign-canvas --save
2.使用
<template> <div> <el-card shadow="hover" header="在線簽名演示"> <el-alert title="感謝優(yōu)秀的 `sign-canvas`,項目地址:https://github.com/langyuxiansheng/vue-sign-canvas" type="success" :closable="false" class="mb15" ></el-alert> <el-button type="primary" size="small" icon="el-icon-edit" @click="onSignCanvasClick">點擊進(jìn)行簽名</el-button> </el-card> <el-dialog title="在線簽名" :visible.sync="signVisible" :close-on-click-modal="true" :close-on-press-escape="true" :width="signDialogWidth"> <sign-canvas class="sign-canvas" ref="SignCanvas" :options="signOptions" v-model="signValue" /> <div slot="footer" class="dialog-footer"> <el-button size="small" @click="onCancelSign">取消</el-button> <el-button type="danger" size="small" @click="onCanvasClear">清空</el-button> <el-button type="primary" size="small" @click="onSaveAsImg">保存</el-button> </div> </el-dialog> </div> </template> <script> import SignCanvas from 'sign-canvas'; export default { name: 'funSignCanvas', components: { SignCanvas, }, data() { return { signVisible: false, signDialogWidth: '', signValue: '', signOptions: { lastWriteSpeed: 1, lastWriteWidth: 2, lineCap: 'round', lineJoin: 'round', canvasWidth: 729, canvasHeight: 460, isShowBorder: false, bgColor: '#E6E6E6', borderWidth: 1, borderColor: '#ff787f', writeWidth: 5, maxWriteWidth: 30, minWriteWidth: 5, writeColor: '#101010', isSign: true, imgType: 'png', }, }; }, mounted() { this.initSignConfig(); window.addEventListener('resize', this.initSignConfig); }, methods: { // 初始化配置信息 initSignConfig() { this.signDialogWidth = `${document.body.offsetWidth / 2 + 40}px`; this.signOptions.canvasWidth = document.body.offsetWidth / 2; this.signOptions.canvasHeight = document.body.offsetHeight / 2; }, // 打開簽名彈窗 onSignCanvasClick() { this.signVisible = true; }, // 取消簽名 onCancelSign() { this.signVisible = false; this.onCanvasClear(); }, // 清空簽名 onCanvasClear() { this.$refs.SignCanvas.canvasClear(); }, // 保存簽名 onSaveAsImg() { const img = this.$refs.SignCanvas.saveAsImg(); console.log(img); }, }, destroyed() { window.removeEventListener('resize', this.initSignConfig); }, }; </script>
3.生成的base64上傳服務(wù)器
可根據(jù)base64轉(zhuǎn)blod上傳至服務(wù)器
Js圖片Base64位轉(zhuǎn)換為blob上傳到服務(wù)器
//轉(zhuǎn)碼方法 function convertBase64UrlToBlob(urlData){ var localData= 'data:image/png...'; //假定dataUrl為base64位 let base = atob(localData.substring(localData.indexOf(',') + 1)); // base是將base64編碼解碼,去掉data:image/png;base64部分 let length = base.length; let url = new Uint8Array(length); while (length--) { url[length] = base.charCodeAt(length); } let file = new File([url], 'a.jpg', { type: 'image/jpg' }) //最后將file,通過ajax請求做為參數(shù)傳給服務(wù)器就可以了 return file }
到此這篇關(guān)于Vue引入sign-canvas實現(xiàn)簽名畫板的文章就介紹到這了,更多相關(guān)Vue簽名畫板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue通過moment插件實現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10ant design vue 表格table 默認(rèn)勾選幾項的操作
這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10windows下vue-cli及webpack搭建安裝環(huán)境
這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04