Vue引入sign-canvas實現簽名畫板效果

更新時間：2023年03月27日 10:32:35 作者：HqL丶1024

這篇文章主要介紹了Vue引入sign-canvas實現簽名畫板,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Vue引入sign-canvas實現簽名畫板

效果圖

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">點擊進行簽名</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上傳服務器

可根據base64轉blod上傳至服務器

Js圖片Base64位轉換為blob上傳到服務器

//轉碼方法
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請求做為參數傳給服務器就可以了
return file 
}

到此這篇關于Vue引入sign-canvas實現簽名畫板的文章就介紹到這了,更多相關Vue簽名畫板內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: