項目基于uniapp做的app端，需要實現在線簽名功能，找了很多文檔學習參考，特此記錄。

template中，

<view class="onevalue">// 展示簽好的圖片<view class="clickimg" v-for="(item, index) in samplerSignList"><image :src="item" class="qmimg" @click="previewImage(item)"></image><image src="../../static/images/delimg.png" class="delimg" @click="delQmimg(1, index)"></image></view>//點擊簽名部分<view class="clickQm" @click="createCanvas(1)"><image src="../../static/images/qm.png"></image><text class="clickQm_text">點擊簽名</text></view></view><!-- 簽名彈窗 --><uni-popup ref="qmPopup" background-color="#fff" type="bottom"><view class="popupheight"><view class="qmpopup_title">簽字<image src="/static/images/false.png" class="qmpopup_false" @click="closeQmPopup"></image></view><view class="qmpopup_cont"><canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas></view><!-- 底部操作按鈕 --><view class="qmpopup_footer"><view class="left" @click="clear">重置</view><view class="right" @click="finish">確定</view></view></view></uni-popup>

script中，需要引入base64位圖像路徑轉換方法

<script>const api = require('@/utils/api.js');const util = require("@/utils/util.js");// 需要引入圖片路徑base64轉換方法，方法可以直接網上搜import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'export default {data() {return {//繪圖圖像ctx: '', //路徑點集合points: [], hasSign: false,signType: 1,samplerSignList: [],showOrNot: true, // 判斷查看圖片等事件觸發onshow}},methods: {// 簽名createCanvas(type) {this.signType = type;this.$refs.qmPopup.open();//創建繪圖對象this.ctx = uni.createCanvasContext('mycanvas', this);//設置畫筆樣式this.ctx.lineWidth = 4;this.ctx.lineCap = 'round';this.ctx.lineJoin = 'round';/* 將canvas背景設置為 白底，不設置 導出的canvas的背景為透明 */this.$nextTick(() => {uni.createSelectorQuery().select('.qmpopup_cont').boundingClientRect((rect) => {this.ctx.rect(0, 0, rect.width, rect.height - 4);this.ctx.setFillStyle('#fff');this.ctx.fill(); //設置填充this.ctx.draw(); //開畫}).exec()})},touchstart(e) {let startX = e.changedTouches[0].x;let startY = e.changedTouches[0].y;let startPoint = { X: startX, Y: startY };this.points.push(startPoint);//每次觸摸開始，開啟新的路徑this.ctx.beginPath();},touchmove(e) {let moveX = e.changedTouches[0].x;let moveY = e.changedTouches[0].y;let movePoint = { X: moveX, Y: moveY };this.points.push(movePoint); //存點let len = this.points.length;if (len >= 2) {this.draw(); //繪制路徑}},touchend() {this.points = [];},draw() {let point1 = this.points[0];let point2 = this.points[1];this.points.shift();this.ctx.moveTo(point1.X, point1.Y);this.ctx.lineTo(point2.X, point2.Y);this.ctx.stroke();this.ctx.setFillStyle('#ffffff');this.ctx.draw(true);this.hasSign = true;},clear() {this.hasSign = false;let that = this;uni.getSystemInfo({success: function(res) {let canvasw = res.windowWidth;let canvash = res.windowHeight;that.ctx.clearRect(0, 0, canvasw, canvash);/* 清除后重新設置m將canvas背景設置為 白底，不設置 導出的canvas的背景為透明 */that.$nextTick(() => {uni.createSelectorQuery().select('.qmpopup_cont').boundingClientRect((rect) => {that.ctx.rect(0, 0, rect.width, rect.height - 4);that.ctx.setFillStyle('#fff');that.ctx.fill(); //設置填充that.ctx.draw(); //開畫}).exec()})}});},finish() {if (!this.hasSign) {uni.showToast({title: '簽名為空不能保存',icon: 'none',duration: 2000})return}let that = this;uni.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {if(!res || !res.tempFilePath) {//這里的res.tempFilePath就是生成的簽字圖片if(that.signType == 1) {that.samplerSignList.push(res.tempFilePath);} else {that.companySignList.push(res.tempFilePath);}that.closeQmPopup();}else{//用來解決安卓真機獲取到的是canvas圖片的臨時路徑，轉成base64格式pathToBase64(res.tempFilePath).then(re => {if(that.signType == 1) {that.samplerSignList.push(re);} else {that.companySignList.push(re);}that.closeQmPopup();})}}});},closeQmPopup() {this.clear();this.$refs.qmPopup.close();},previewImage(url) {uni.previewImage({urls: [url], current: 0 });},delQmimg(type, num) {if(type == 1) {this.samplerSignList.splice(num, 1);} else {this.companySignList.splice(num, 1);}},}

效果：簽名的時候和查看的時候，注意要設置畫布背景為白色，不然簽名是黑色的看不見

總結

以上是生活随笔為你收集整理的uniapp+canvas实现app在线电子签名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。