前端手写面板

最新推荐文章于 2024-10-31 15:49:24 发布

_程序猿_悟空

最新推荐文章于 2024-10-31 15:49:24 发布

阅读量100

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_46487331/article/details/139269968

版权

前端手写面板

1、安装fabric.js

 npm install fabric --save

2、上代码

<template>
    <div class="bordered-div">
        <canvas id="canvas" width="450" height="240"></canvas>
        <button @click="saveSignature">保存签名</button>
        <button @click="clearSignature">清空签名</button>
        <img :src="dataUrls" />
    </div>
</template>

<script>

import { fabric } from "fabric";

export default {
    data() {
        return {
            dataUrls: "",
        };
    },
    mounted() {
        // 实例化fabric canvas
        this.canvas = new fabric.Canvas("canvas", {
            isDrawingMode: true,//表示可以进行绘图操作。
        });
    },
    methods: {
        // 保存签名
        saveSignature() {
            const dataUrl = this.canvas.toDataURL({
                format: "png",
                quality: 1,
                enableRetinaScaling: 1,
                multiplier: 1,
            });
            // 签名数据保存为图片
            this.dataUrls = dataUrl;
            this.changeToImage(this.dataUrls);
            console.log(dataUrl);
        },
        // 保存签名
        clearSignature() {
            this.canvas.clear().renderAll();
        },

        changeToImage(base64) {
            return `data:image/png;base64,${base64}`;
        },
    },
};
</script>

<style scoped>
h1 {
  color: green;
}

/* CSS样式 */
.bordered-div {
    border-width: 3px; /* 边框宽度 */
    border-style: solid; /* 边框样式，可以是solid(实线), dashed(虚线), dotted(点线)等 */
    border-color: red; /* 边框颜色 */
    width : 450px ;
    height : 240px ;
}
</style>