uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式

最近自己弄了一个手写板可以手写签名画图踩过一些坑幸运怕坑分享给跟我遇到一样问题的小白们

适用于APP和小程序

一、手写板

效果如下图：

1.H5代码

代码如下（示例）：

<!-- 手写板组件 --><view><zwp-draw-pad ref="drawview" :width="500" :height="600" /></view><!-- 功能区 --><view class="button"><view class="clearbtn" @click="padinit()">清除</view><view class="surebtn" @click="padsave()">确定</view></view>

2.JS代码

代码如下（示例）：

引用的组件库是在uniapp的插件库一位大神封装的我把原地址贴上：https://ext.dcloud.net.cn/plugin?id=4329

//按照自己放组件库的地址引入
import zwpDrawPad from '../../../components/code/zwp-draw-pad/zwp-draw-pad.vue'export default {components: {zwpDrawPad},

很好用需要什么方法直接看原文api自行取用由于我只用到了清除和保存所以只放上这两种方法的引入
methods:代码

         // 清除手写内容padinit() {this.$refs.drawview.init()},// 保存手写内容为图片（base64）padsave() {this.$refs.drawview.save().then(res => {console.log('保存图片的地址', res.tempFilePath)})}

demo:可以直接拿去用

<template><view class=""><!-- 手写板组件 --><view><zwp-draw-pad ref="drawview" :width="500" :height="600" /></view><!-- 功能区 --><view class="button"><view class="clearbtn" @click="padinit()">清除</view><view class="surebtn" @click="padsave()">确定</view></view></view>
</template><script>import zwpDrawPad from '../../../components/code/zwp-draw-pad/zwp-draw-pad.vue'export default {components: {zwpDrawPad},data() {return {}},methods: {// 清除手写内容padinit() {this.$refs.drawview.init()},// 保存手写内容为图片（base64）padsave() {this.$refs.drawview.save().then(res => {console.log('保存图片的地址', res.tempFilePath)})}}}
</script><style lang="less">page {background-color: #F5F5F5;}.button {width: 100%;height: 40px;color: #27408B;position: fixed;bottom: 0px;}.clearbtn {background-color: #FFFFFF;width: 50%;height: 40px;color: #27408B;float: left;font-size: 15px;font-family: '黑体';line-height: 40px;text-align: center;}.surebtn {background-color: #FFFFFF;width: 50%;height: 40px;color: #27408B;float: left;font-size: 15px;font-family: '黑体';line-height: 40px;text-align: center;}.clearbtn:hover {background-color: #D8D8D8;}.surebtn:hover {background-color: #D8D8D8;}
</style>

总结

有问题可以给我留言有问必答

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式相关推荐

Uni-app 小程序 APP 的广告变现之路：插屏广告
插屏广告插屏广告组件是由客户端原生的图片.文本.视频控件组成的:一般来说,插屏广告可以实现比传统信息流广告和banner广告展现更大的广告尺寸,同样能够满足您对大量曝光和用户转化的需求. 平台差异说 ...
Uni-app 小程序 APP 的广告变现之路：沉浸式视频流广告
沉浸式视频流广告随着羊了个羊的爆火,网络上很快开始流传出羊了个羊后台视频广告收益图以及开发者全款买两套房的图片.尽管大多数人无法想象,但是羊了个羊一天就有月400万的视频广告收益一定让大家对于视频广 ...
uniapp小程序绘制二维码生成图片截图保存到本地
项目场景: 适应于uniapp中二维码生成图片进行截图保存问题描述: 今天用uniapp写小程序二维码并保存到本地,网上的完全没有用,最后自己写了一个, 1.使用weapp.qrcode生成二维码, ...
【微信小程序】实现手写电子签名并保存为图片功能
需求概述: 微信小程序的一个功能,类似于画板,用于电子签名,要求有一键清空画板和保存功能. 实现思路: 微信开发文档中的Canvas组件微信画布API中的 wx.createCanvasContex ...
省钱兄同城跑腿小程序源码uniapp前端模版源码（小程序+APP+H5）
开源省钱兄同城跑腿源码,目前只开源用户端V2版本部分核心模块源码提供学习研究使用uniapp技术,提供学习使用不可商业适配支持公众号+APP+H5+小程序,使用Hbuilder导入即可运行 #功能 ...
crmeb知识付费uniapp重构适配小程序 APP 微信H5
uniapp重构crmeb知识付费适配小程序 APP wxh5 前端首页前端首页顶部banner图可在后台[系统设置>首页设置>首页轮播图]中更换:图片尺寸:750*365 px 首页 ...
uniapp小程序运行正常，app运行报cid unmatched at view.umd.min.js
uniapp小程序运行正常,app运行报cid unmatched at view.umd.min.js 阐述 uniapp 运行小程序正常,但是调试App.有时候就会报一大堆错误,是因为小程序编辑器 ...
基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
uniapp小程序商城开发thinkphp6积分商城、团购、秒杀封装APP
uniapp小程序商城开发thinkphp6积分商城.团购.秒杀封装APP,后台是vue开发需要源代码的可以联系我,找我要哦 <template><view v-if=" ...

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式

文章目录

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式

一、手写板

1.H5代码

2.JS代码

总结

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式相关推荐

最新文章

热门文章

uniapp 小程序 APP 实现手写板 签名 画图 canvas 保存为图片格式

文章目录

uniapp 小程序 APP 实现手写板 签名 画图 canvas 保存为图片格式

一、手写板

1.H5代码

2.JS代码

总结

uniapp 小程序 APP 实现手写板 签名 画图 canvas 保存为图片格式相关推荐

最新文章

热门文章

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式

uniapp 小程序 APP 实现手写板签名画图 canvas 保存为图片格式相关推荐