canvas实现手写功能

1.从接口获取手写内容，处理成由单个字组成的数组（包括符号）
2.合成所有图的时候，会闪现outputCanvas合成的图，注意隐藏
3.可以进行多个手写内容切换
4.基于uniapp的

<template><view class="content"><!-- 头部 --><view class="navBarBox"><!-- 头部导航 --><u-navbar height="120rpx"><view class="u-nav-slot" slot="left"><view class="flex alignCenterClass flexBetween" @click="_close"><view class="leftBox"><img src="static/imgs/leftIcon.png" alt="" /></view></view></view><view class="centerBox" slot="center"><view class="title"> 批注声明 </view><u--texttype="error"text="请您在区域内逐字手写以下文字，全部写完后点击保存！"size="30rpx"align="center"></u--text></view><view class="u-nav-slot flex" slot="right"><viewclass="btn-box signerBox"v-if="isComplete"@click="_submitDraw"><text> 完成 </text><u-icon name="checkmark" color="#fff" size="26"></u-icon></view></view></u-navbar></view><view class="content-model"><view class="model-left"><viewv-for="(item, index) in docNoteList"class="note-item":key="item.code"@click="_checkNotes(item, 'click')"><viewclass="note-btn btn-box":class="curNode.code == item.code ? 'actice-node' : ''"><text>批注{{ index + 1 }}</text><u-iconv-if="curNode.code == item.code"name="edit-pen"color="#fff"size="28"></u-icon></view><u-iconv-if="item.isDone"name="checkmark-circle"color="#087e6a"size="26"></u-icon></view></view><view class="container"><view class="notes-list"><scroll-viewscroll-y="true"style="height: 600rpx"class="scroll-view_w"enable-flex="true"scroll-with-animation="true"><view class="note-box"><viewv-for="item in curNode.notesList"@click="_checkItem(item)":key="item.index"class="notes-item":class="activeItem.index == item.index ? 'active' : ''"><view class="note-label">{{ item.label }}</view><!-- 展示写好的字 --><view class="note-img"><img v-if="item.imgSrc" :src="item.imgSrc" alt="" /></view></view></view></scroll-view></view><view class="main-model"><view class="show-canvas"><!-- canvas背景字 --><view class="bg-text"><text>{{ activeItem.label }}</text></view><!-- 当前需要手写的字的canvas --><view class="canvas-container"><canvascanvas-id="inputCanvas"class="input-canvas"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd"></canvas></view></view></view><!-- 将单个字的图片合并章所用的canvas --><view class="show-result"><canvas:style="{ height: outputHeight, width: outputWidth }"canvas-id="outputCanvas"class="output-canvas"></canvas></view></view></view></view>
</template><script>
import { pathToBase64 } from "../../utils/image-tools/index.js";
import { addNoteImg, getDocData } from "@/utils/api.js";
export default {components: {},data() {return {show: true,isDrawing: false,startX: 0,startY: 0,strokes: [],charObjects: [],timer: null,delay: 500, // 写完后的延迟fj: "",outputHeight: "100px",outputWidth: "100px",tempFilePath: "", //当前显示的图片activeItem: {}, //当前的批注文字document: "",docNoteList: [], //所有批注列表curNode: {notesList: [],}, //当前批注isComplete: false, //当前文档所有批注书否全部写完，控制完成按钮的显示tempPathObj: {},showImg: "", //批注合成图};},computed: {},methods: {// 返回上一页_close() {uni.redirectTo({url: "/pages/index/fileEdit?documentId=" + this.document.documentId,});},_checkItem(val) {this.activeItem = { ...val };this.tempFilePath = val.imgSrc || "";},handleTouchStart(e) {e.preventDefault(); // 阻止默认滚动行为if (this.timer) {clearTimeout(this.timer);this.timer = null;}const touch = e.touches[0];this.isDrawing = true;this.startX = touch.x;this.startY = touch.y;this.strokes.push({x: touch.x,y: touch.y,});},handleTouchMove(e) {e.preventDefault(); // 阻止默认滚动行为if (!this.isDrawing) return;const touch = e.touches[0];const context = uni.createCanvasContext("inputCanvas", this);context.setStrokeStyle("#000");context.setLineWidth(15);context.setLineJoin('round');context.setLineCap('round');context.moveTo(this.startX, this.startY);context.lineTo(touch.x, touch.y);context.stroke();context.draw(true);this.startX = touch.x;this.startY = touch.y;this.strokes.push({x: touch.x,y: touch.y,});},handleTouchEnd(e) {e.preventDefault(); // 阻止默认滚动行为this.isDrawing = false;// 写完后延迟，清空Canvas，获取手写图this.timer = setTimeout(this.addChar, this.delay);},addChar() {const inputContext = uni.createCanvasContext("inputCanvas", this);uni.canvasToTempFilePath({canvasId: "inputCanvas",success: (res) => {// 清空 inputCanvas 上的内容inputContext.clearRect(0, 0, 700, 700);inputContext.draw();this._pathToBase64(res.tempFilePath, "show");},});},//批注合成处理_drawImage(notesList, imgCode) {this.showImg = "";let outputContext = "";outputContext = uni.createCanvasContext("outputCanvas", this);const charSize = 40; // 调整字符大小const maxCharsPerRow = 20; // 每行最大字符数// 动态设置高度const numRows = Math.ceil(notesList.length / maxCharsPerRow); // 计算行数this.outputHeight = `${numRows * charSize}px`; // 动态计算输出画布的高度this.outputWidth = `${maxCharsPerRow * charSize}px`; // 动态计算输出画布的宽度// 绘制字符let rowSpacing = "";let colSpacing = "";notesList.forEach((item, index) => {const rowIndex = Math.floor(index / maxCharsPerRow); // 当前字符的行索引const colIndex = index % maxCharsPerRow; // 当前字符的列索引rowSpacing = rowIndex * charSize;colSpacing = colIndex * charSize;outputContext.drawImage(item.tempFilePath,colSpacing,rowSpacing,charSize,charSize);});setTimeout(() => {outputContext.draw(false, () => {uni.canvasToTempFilePath({canvasId: "outputCanvas",success: (result) => {uni.compressImage({//压缩图片src: result.tempFilePath,success: (res) => {pathToBase64(res.tempFilePath).then((base64) => {//赋值const _nodeImg = this.filterBase64(base64);this.tempPathObj[imgCode] = _nodeImg;console.log("tempPathObj", this.tempPathObj);this.showImg = _nodeImg;// 清空 outputContext 上的内容outputContext.clearRect(0,0,colSpacing + charSize * charSize,rowSpacing + numRows * charSize);outputContext.draw();}).catch((error) => {console.error(error);});},});},});});}, 500);},_checkNotePass() {let isComplete = true; //是否全部批注都写完，默认都写完了const _curNode = this.curNode;this.docNoteList.map((item) => {if (item.code == _curNode.code) {item.isDone = _curNode.notesList.every((item) => {return item.imgSrc != "";});if (item.isDone) {this._drawImage(_curNode.notesList, _curNode.imgCode);}}if (!item.isDone) {//如有未完成的isComplete = false;}});this.isComplete = isComplete;},_pathToBase64(val, code) {uni.compressImage({//压缩图片src: val,success: (res) => {pathToBase64(res.tempFilePath).then((base64) => {const _notesList = this.curNode.notesList;const signImg = this.filterBase64(base64);// 手写处理_notesList.map((item) => {if (item.index == this.activeItem.index) {item.imgSrc = signImg;item.tempFilePath = res.tempFilePath;}});this.tempFilePath = signImg;this._checkNotePass();// 自动轮下一个if (this.activeItem.index < _notesList.length - 1) {this._checkItem(_notesList[this.activeItem.index + 1]);}}).catch((error) => {console.error(error);});},});},// 过滤base64太长有换行字符方法filterBase64(codeImages) {return codeImages.replace(/[\r\n]/g, "");},// 保存更新async _submitDraw() {let documentData = {...this.document.documentData,};for (const key in this.tempPathObj) {documentData[key] = this.tempPathObj[key];}const query = {documentId: this.document.documentId,documentData: JSON.stringify(documentData),};await addNoteImg(query).then(({ data: res }) => {if (res.code == 0) {uni.showToast({icon: "success",title: "保存成功",});uni.redirectTo({url: "/pages/index/fileEdit?documentId=" + this.document.documentId,});}});},// 获取文书详情async _getDocData(documentId) {await getDocData({ documentId }).then(({ data: res }) => {const _documentData = JSON.parse(res.data.documentData);this.document = {documentId: res.data.documentId,documentData: _documentData,};this._checkDocData(_documentData);});},// 处理批注，形成列表_checkDocData(data) {let docNote = [];for (const key in data) {const element = data[key];//根据实际需求处理这一步if (key.includes("note_text")) {let notesList = [];// 处理批注内容const _text = element.split("");for (let i = 0; i < _text.length; i++) {const ele = _text[i];notesList.push({label: ele,imgSrc: "",index: i,tempFilePath: "",code: key,});}const _key = key.split("note_text")[1] || "";const _imgCode = "note_img" + _key;docNote.push({code: key,imgCode: _imgCode,label: element,nodeImg: "", //最终合成的图片isDone: false, //当前批注是否已写完notesList, //所有批注问字});this.$set(this.tempPathObj, _imgCode, "");}}console.log(docNote, 142545);this.docNoteList = docNote;this.curNode = { ...docNote[0] };this._checkItem(this.curNode.notesList[0]);},// 处理当前批注数据_checkNotes(value) {this.curNode = { ...value };this.showImg = this.tempPathObj[value.imgCode];this._checkItem(this.curNode.notesList[0]);},},beforeDestroy() {},onLoad(option) {this._getDocData(option.documentId);},created() {},
};
</script><style scoped lang="scss">
.content {height: 100vh;
}
.content-model {width: 100%;margin-top: 80rpx;display: flex;justify-content: space-around;align-items: flex-start;.model-left {width: 12%;.note-item {display: flex;justify-content: space-between;align-items: center;}.note-btn {margin-bottom: 30rpx;background-color: #ee7c36;}.actice-node {background-color: $mainColor;}}
}
.centerBox {text-align: center;
}
.signerBox {background-color: $mainColor;
}
.btn-box {display: flex;justify-content: space-around;align-items: center;color: #fff;padding: 12rpx 50rpx;border-radius: 40rpx;font-size: 40rpx;
}
.navBarBox {.leftBox {width: 40rpx;height: 40rpx;margin-right: 40rpx;margin-top: -20rpx;img {width: 100%;height: 100%;}}
}.container {display: flex;flex-direction: column;align-items: center;width: 87%;.show-result {position: fixed;bottom: -200prx;width: 40%;z-index: 1;background-color: #ee7c36;}.notes-list {width: 100%;display: flex;flex-direction: column;justify-content: center;flex-wrap: wrap;// background-color: rgba(223, 220, 219,0.2);background-color: #fff;margin-bottom: 25rpx;position: relative;z-index: 999;.scroll-view_w {width: 100% !important;}.note-box {width: 100%;display: flex;flex-direction: row;justify-content: center;flex-wrap: wrap;}.note-label,.note-img {width: 120rpx;height: 120rpx;line-height: 120rpx;text-align: center;margin-right: 5rpx;margin-bottom: 3rpx;border: 2rpx solid #999;background-color: #fff;font-size: 100rpx;img {width: 100%;height: 100%;}}.active {.note-label,.note-img {border: 2rpx solid rgba(212, 21, 53, 0.9);}}}
}
.main-model {display: flex;justify-content: center;width: 100%;.show-img,.show-canvas {position: relative;width: 700rpx;height: 700rpx;border: 8rpx dashed #dddee1;}.show-img img {z-index: 999;}.show-canvas .bg-text {position: absolute;top: -30rpx;left: 0;width: 100%;height: 100%;font-size: 300px;line-height: 700rpx;text-align: center;color: rgba(153, 153, 153, 0.1);}.canvas-container {width: 100%;height: 100%;.input-canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 10rpx;touch-action: none;// background-color: #ee7c36;/* 禁止默认触摸动作 */}}
}
.temp-img {width: 300rpx;height: 100rpx;img {width: 100%;height: 100%;}border: 2rpx solid #dddee1;
}
</style>

效果图：