欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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生成隨機驗證碼的示例代碼

    vue生成隨機驗證碼的示例代碼

    本篇文章主要介紹了vue生成隨機驗證碼的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧‘
    2017-09-09
  • vue+golang實現(xiàn)上傳微信頭像功能

    vue+golang實現(xiàn)上傳微信頭像功能

    這篇文章主要介紹了vue+golang實現(xiàn)上傳微信頭像功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10
  • vue3中provide和inject的使用

    vue3中provide和inject的使用

    provide和inject在Vue 2中已經(jīng)被廣泛應(yīng)用,不是新鮮API,3.0重新認(rèn)識一下它們兩個,本文重點給大家介紹vue3中provide和inject的使用,需要的朋友參考下吧
    2021-07-07
  • Vue通過moment插件實現(xiàn)獲取當(dāng)前月的第一天和最后一天

    Vue通過moment插件實現(xiàn)獲取當(dāng)前月的第一天和最后一天

    這篇文章主要介紹了Vue 結(jié)合插件moment 實現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10
  • ant design vue 表格table 默認(rèn)勾選幾項的操作

    ant design vue 表格table 默認(rèn)勾選幾項的操作

    這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue入門實戰(zhàn)之天氣預(yù)報

    Vue入門實戰(zhàn)之天氣預(yù)報

    這篇文章主要為大家詳細(xì)介紹了Vue入門實戰(zhàn)之天氣預(yù)報,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue隱藏顯示、只讀實例代碼

    Vue隱藏顯示、只讀實例代碼

    本文通過實例代碼給大家介紹了Vue隱藏顯示、只讀功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧
    2018-07-07
  • Vuejs第十三篇之組件——雜項

    Vuejs第十三篇之組件——雜項

    組件(Component)是 Vue.js 最強大的功能之一。本文重點給大家介紹vuejs組件相關(guān)知識,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧
    2016-09-09
  • 全站最詳細(xì)的Vuex教程

    全站最詳細(xì)的Vuex教程

    vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了全站最詳細(xì)的Vuex教程,需要的朋友可以參考下
    2018-04-04
  • windows下vue-cli及webpack搭建安裝環(huán)境

    windows下vue-cli及webpack搭建安裝環(huán)境

    這篇文章主要介紹了windows下vue-cli及webpack搭建安裝環(huán)境,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-04-04

最新評論