uni-app canvas 手写签名板功能实现(vue)

最新推荐文章于 2024-07-27 15:51:00 发布

房东的猫〃

最新推荐文章于 2024-07-27 15:51:00 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/Landlord_cat/article/details/108144398

版权

这篇博客记录了在uni-app中使用canvas创建手写签名板的过程，包括遇到的问题和解决方案，通过设置延时器解决获取DOM元素为null的难题。

摘要由CSDN通过智能技术生成

仅仅为了记录下踩过的坑如果能帮到你请留言点赞哈哈
话不多说上代码

<template>
  <view>
    <view class="signature">
      <view id="canvas">
		 
	  </view>
    </view>
    <u-button id="clear" @click="clear">重新签名</u-button>
    <u-button id="save" @click="saveSign">确定保存</u-button>
	<view class="img">
		<image :src="src" style="width: 740rpx;height: 600rpx;"></image>
	</view>
  </view>
</template>
 
<script>
export default {
   
  data() {
   
    return {
   
		src: '',
		time1: '',
		time2: ''
    };
  },
  onReady() {
   
    this.init_lineCanvas();
  },
  methods: {
   
    // 保存签名
    saveSign() {
   
      this.time1 = setTimeout(() => {
   
        this.src = sessionStorage.getItem("imgBase64");
		 console.log(this.src)