<view class="container">
? <canvas canvas-id="firstCanvas" id="firstCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
? <view class="btn">
? ? <button type="warn" bindtap="clear">
? ? ? 清除
? ? </button>
? ? <button type="primary" ?bindtap="export">
? ? ? 確定
? ? </button>
? </view>
</view>

#firstCanvas{
? width: 750rpx;
? height: 600rpx;
? background-color: #fff;
}

const app = getApp()
Page({
? data: {
? ? context: null,
? ? index: 0,
? ? height: 0,
? ? width: 0
? },
? /**記錄開始點 */
? bindtouchstart: function(e) {
? ??
? ? this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
? },
? /**記錄移動點，刷新繪制 */
? bindtouchmove: function(e) {
? ?
? ? this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
? ? this.data.context.stroke();
? ? this.data.context.draw(true);
? ? this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
? },
??
? /**清空畫布 */
? clear: function() {
? ? this.data.context.clearRect(0, 0, this.data.width, this.data.height);
? ? this.data.context.draw();
? ? this.data.context.setStrokeStyle('#00ff00')
? ? this.data.context.setLineWidth(2)
? ? this.data.context.setFontSize(20)
? ? let str = "簽名區(qū)域";
? ? this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)
? ? this.data.context.draw()
? },
? base64(url, type) {
? ? return new Promise((resolve, reject) => {
? ? ? wx.getFileSystemManager().readFile({
? ? ? ? filePath: url,
? ? ? ? encoding: 'base64',
? ? ? ? success(res){
? ? ? ? ? resolve('data:img/'+type.toLocaleLowerCase()+':base64,'+res.data)
? ? ? ? },
? ? ? ? fail(){
? ? ? ? ? reject()
? ? ? ? }
? ? ? })
? ? })
? },
? /**導出圖片 */
? export: function() {
? ? const that=this;
? ? this.data.context.draw(false, wx.canvasToTempFilePath({
? ? ? x: 0,
? ? ? y: 0,
? ? ? width: that.data.width,
? ? ? height: that.data.height,
? ? ? destWidth: that.data.width,
? ? ? destHeight: that.data.height,
? ? ? fileType: 'jpg',
? ? ? canvasId: 'firstCanvas',
? ? ? success(res) {
? ? ? ? let url = res.tempFilePath
? ? ? ? that.base64(url, 'jpg').then(res => {
? ? ? ? ? console.log('base64數(shù)據(jù)流',res);
? ? ? ? ? var pages = getCurrentPages();
? ? ? ? ? var prevPage = pages[pages.length - 2]; //上一個頁面
? ? ? ? ? ?//直接調用上一個頁面的setData()方法，把數(shù)據(jù)存到上一個頁面中去
? ? ? ? ? prevPage.setData({
? ? ? ? ? ? sign: {
? ? ? ? ? ? ? sign:res,
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? ? wx.navigateBack({//返回
? ? ? ? ? ? delta: 1
? ? ? ? ? })
? ? ? ? })
? ? ? },
? ? ? fail() {
? ? ? ? wx.showToast({
? ? ? ? ? title: '導出失敗',
? ? ? ? ? icon: 'none',
? ? ? ? ? duration: 2000
? ? ? ? })
? ? ? }
? ? }))
? },
? onShow: function() {
? ? let query = wx.createSelectorQuery();
? ? const that = this;
? ? query.select('#firstCanvas').boundingClientRect();
? ? query.exec((rect) => {
? ? ? let width = rect[0].width;
? ? ? let height = rect[0].height;
? ? ? that.setData({
? ? ? ? width,
? ? ? ? height
? ? ? });
? ? ? const context = wx.createCanvasContext('firstCanvas')
? ? ? that.setData({
? ? ? ? context: context
? ? ? })
? ? ? that.data.context.setLineWidth(2)
? ? ? that.data.context.setLineCap('round')
? ? });
? },
})

<view class="wrapper">
? <view class="handBtn">
? ? <image catchtap="selectColorEvent" src="{{ selectColor === 'black' ? '../../public/image/index/sign/color_black_selected.png' : '../../public/image/index/sign/color_black.png' }}" class="{{ selectColor === 'black' ? 'color_select' : '' }} black-select" data-color="black"
? ? ? data-color-value="#1A1A1A"></image>
? ? <image catchtap="selectColorEvent" src="{{ selectColor === 'red' ? '../../public/image/index/sign/color_red_selected.png' : '../../public/image/index/sign/color_red.png' }}" class="{{ selectColor === 'red' ? 'color_select' : '' }} red-select" data-color="red"
? ? ? data-color-value="#ca262a"></image>
? ? <button catchtap="retDraw" class="delBtn">重寫</button>
? ? <button catchtap="saveCanvasAsImg" class="saveBtn">保存</button>
? ? <button catchtap="previewCanvasImg" class="previewBtn">預覽</button>
? ? <button catchtap="uploadCanvasImg" class="uploadBtn">上傳</button>
? ? <button catchtap="subCanvas" class="subBtn">完成</button>
? </view>
? <view class="handCenter">
? ? <canvas class="handWriting" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove"
? ? ? bindtouchend="uploadScaleEnd" bindtap="mouseDown" canvas-id="handWriting">
? ? </canvas>
? </view>
? <view class="handRight">
? ? <view class="handTitle">手寫板</view>
? </view>
</view>

page {
? background: #fbfbfb;
? height: auto;
? overflow: hidden;
}

.wrapper {
? width: 100%;
? height: 95vh;
? margin: 30rpx 0;
? overflow: hidden;
? display: flex;
? align-content: center;
? flex-direction: row;
? justify-content: center;
? font-size: 28rpx;
}

.handWriting {
? background: #fff;
? width: 100%;
? height: 95vh;
}

.handRight {
? display: inline-flex;
? align-items: center;
}

.handCenter {
? border: 4rpx dashed #e9e9e9;
? flex: 5;
? overflow: hidden;
? box-sizing: border-box;
}

.handTitle {
? transform: rotate(90deg);
? flex: 1;
? color: #666;
}

.handBtn button {
? font-size: 28rpx;
}

.handBtn {
? height: 95vh;
? display: inline-flex;
? flex-direction: column;
? align-items: center;
? flex: 1;
}

.delBtn,
.saveBtn,
.previewBtn,
.uploadBtn,
.subBtn{
? width: 160rpx !important;
? height: 70rpx;
? border: 2rpx solid #eeeeee;
? transform: rotate(90deg);
? color: #666;
}

.delBtn{
? position: absolute;
? bottom: 850rpx;
}

.saveBtn{
? position: absolute;
? bottom: 660rpx;
}
.previewBtn{
? position: absolute;
? bottom: 470rpx;
}
.uploadBtn{
? position: absolute;
? bottom: 280rpx;
}
.subBtn {
? position: absolute;
? bottom: 52rpx;
? display: inline-flex;
? transform: rotate(90deg);
? background: #218FFC;
? color: #fff;
? margin-bottom: 30rpx;
? text-align: center;
? justify-content: center;
}

.black-select {
? width: 60rpx;
? height: 60rpx;
? position: absolute;
? top: 30rpx;
? left: 25rpx;
}
.black-select.color_select {
? width: 90rpx;
? height: 90rpx;
? top: 30rpx;
? left: 10rpx;
}
.red-select {
? width: 60rpx;
? height: 60rpx;
? position: absolute;
? top:140rpx;
? left:25rpx;
}
.red-select.color_select {
? width: 90rpx;
? height: 90rpx;
? top: 120rpx;
? left: 10rpx;
}

Page({
? data: {
? ? canvasName: 'handWriting',
? ? ctx: '',
? ? canvasWidth: 0,
? ? canvasHeight: 0,
? ? transparent: 1, // 透明度
? ? selectColor: 'black',
? ? lineColor: '#1A1A1A', // 顏色
? ? lineSize: 1.5, ?// 筆記倍數(shù)
? ? lineMin: 0.5, ? // 最小筆畫半徑
? ? lineMax: 4, ? ? // 最大筆畫半徑
? ? pressure: 1, ? ? // 默認壓力
? ? smoothness: 60, ?//順滑度，用60的距離來計算速度
? ? currentPoint: {},
? ? currentLine: [], ?// 當前線條
? ? firstTouch: true, // 第一次觸發(fā)
? ? radius: 1, //畫圓的半徑
? ? cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪區(qū)域
? ? bethelPoint: [], ?//保存所有線條 生成的貝塞爾點；
? ? lastPoint: 0,
? ? chirography: [], //筆跡
? ? currentChirography: {}, //當前筆跡
? ? signImg: 'signImg',
? ? linePrack: [] //劃線軌跡 , 生成線條的實際點
? },
? onLoad (options) {
? ? this.setData({
? ? ? signImg: options.names,
? ? })
? ? let canvasName = this.data.canvasName
? ? let ctx = wx.createCanvasContext(canvasName)
? ? this.setData({
? ? ? ctx: ctx
? ? })
? ? var query = wx.createSelectorQuery();
? ? query.select('.handCenter').boundingClientRect(rect => {
? ? ? this.setData({
? ? ? ? canvasWidth: rect.width,
? ? ? ? canvasHeight: rect.height
? ? ? })
? ? ? /* 將canvas背景設置為 白底，不設置 ?導出的canvas的背景為透明 */
? ? ? // console.log(this, 'hahah');
? ? ? this.setCanvasBg('#fff');
? ? }).exec();
? },
? // 筆跡開始
? uploadScaleStart (e) {
? ? if (e.type != 'touchstart') return false;
? ? let ctx = this.data.ctx;
? ? ctx.setFillStyle(this.data.lineColor); ?// 初始線條設置顏色
? ? ctx.setGlobalAlpha(this.data.transparent); ?// 設置半透明
? ? let currentPoint = {
? ? ? x: e.touches[0].x,
? ? ? y: e.touches[0].y
? ? }
? ? let currentLine = this.data.currentLine;
? ? currentLine.unshift({
? ? ? time: new Date().getTime(),
? ? ? dis: 0,
? ? ? x: currentPoint.x,
? ? ? y: currentPoint.y
? ? })
? ? this.setData({
? ? ? currentPoint,
? ? ? // currentLine
? ? })
? ? if (this.data.firstTouch) {
? ? ? this.setData({
? ? ? ? cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x },
? ? ? ? firstTouch: false
? ? ? })
? ? }
? ? this.pointToLine(currentLine);
? },
? // 筆跡移動
? uploadScaleMove (e) {
? ? if (e.type != 'touchmove') return false;
? ? if (e.cancelable) {
? ? ? // 判斷默認行為是否已經被禁用
? ? ? if (!e.defaultPrevented) {
? ? ? ? e.preventDefault();
? ? ? }
? ? }
? ? let point = {
? ? ? x: e.touches[0].x,
? ? ? y: e.touches[0].y
? ? }

? ? //測試裁剪
? ? if (point.y < this.data.cutArea.top) {
? ? ? this.data.cutArea.top = point.y;
? ? }
? ? if (point.y < 0) this.data.cutArea.top = 0;

? ? if (point.x > this.data.cutArea.right) {
? ? ? this.data.cutArea.right = point.x;
? ? }
? ? if (this.data.canvasWidth - point.x <= 0) {
? ? ? this.data.cutArea.right = this.data.canvasWidth;
? ? }
? ? if (point.y > this.data.cutArea.bottom) {
? ? ? this.data.cutArea.bottom = point.y;
? ? }
? ? if (this.data.canvasHeight - point.y <= 0) {
? ? ? this.data.cutArea.bottom = this.data.canvasHeight;
? ? }
? ? if (point.x < this.data.cutArea.left) {
? ? ? this.data.cutArea.left = point.x;
? ? }
? ? if (point.x < 0) this.data.cutArea.left = 0;

? ? this.setData({
? ? ? lastPoint: this.data.currentPoint,
? ? ? currentPoint: point
? ? })
? ? let currentLine = this.data.currentLine
? ? currentLine.unshift({
? ? ? time: new Date().getTime(),
? ? ? dis: this.distance(this.data.currentPoint, this.data.lastPoint),
? ? ? x: point.x,
? ? ? y: point.y
? ? })
? ? // this.setData({
? ? // ? currentLine
? ? // })
? ? this.pointToLine(currentLine);
? },
? // 筆跡結束
? uploadScaleEnd (e) {
? ? if (e.type != 'touchend') return 0;
? ? let point = {
? ? ? x: e.changedTouches[0].x,
? ? ? y: e.changedTouches[0].y
? ? }
? ? this.setData({
? ? ? lastPoint: this.data.currentPoint,
? ? ? currentPoint: point
? ? })
? ? let currentLine = this.data.currentLine
? ? currentLine.unshift({
? ? ? time: new Date().getTime(),
? ? ? dis: this.distance(this.data.currentPoint, this.data.lastPoint),
? ? ? x: point.x,
? ? ? y: point.y
? ? })
? ? // this.setData({
? ? // ? currentLine
? ? // })
? ? if (currentLine.length > 2) {
? ? ? var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
? ? ? //$("#info").text(info.toFixed(2));
? ? }
? ? //一筆結束，保存筆跡的坐標點，清空，當前筆跡
? ? //增加判斷是否在手寫區(qū)域；
? ? this.pointToLine(currentLine);
? ? var currentChirography = {
? ? ? lineSize: this.data.lineSize,
? ? ? lineColor: this.data.lineColor
? ? };
? ? var chirography = this.data.chirography
? ? chirography.unshift(currentChirography);
? ? this.setData({
? ? ? chirography
? ? })
? ? var linePrack = this.data.linePrack
? ? linePrack.unshift(this.data.currentLine);
? ? this.setData({
? ? ? linePrack,
? ? ? currentLine: []
? ? })
? },
? retDraw() {
? ? this.data.ctx.clearRect(0, 0, 700, 730)
? ? this.data.ctx.draw();

? ? //設置canvas背景
? ? this.setCanvasBg("#fff");
? },

? //畫兩點之間的線條；參數(shù)為:line，會繪制最近的開始的兩個點；
? pointToLine (line) {
? ? this.calcBethelLine(line);
? ? return;
? },
? //計算插值的方式；
? calcBethelLine (line) {
? ? if (line.length <= 1) {
? ? ? line[0].r = this.data.radius;
? ? ? return;
? ? }
? ? let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5;
? ? if (line.length <= 2) {
? ? ? x0 = line[1].x
? ? ? y0 = line[1].y
? ? ? x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
? ? ? y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
? ? ? //x2 = line[1].x;
? ? ? //y2 = line[1].y;
? ? ? x1 = x0 + (x2 - x0) * curveValue;
? ? ? y1 = y0 + (y2 - y0) * curveValue;;

? ? } else {
? ? ? x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
? ? ? y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
? ? ? x1 = line[1].x;
? ? ? y1 = line[1].y;
? ? ? x2 = x1 + (line[0].x - x1) * curveValue;
? ? ? y2 = y1 + (line[0].y - y1) * curveValue;
? ? }
? ? //從計算公式看，三個點分別是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)這個是控制點，控制點不會落在曲線上；實際上，這個點還會手寫獲取的實際點，卻落在曲線上
? ? len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 });
? ? lastRadius = this.data.radius;
? ? for (let n = 0; n < line.length - 1; n++) {
? ? ? dis += line[n].dis;
? ? ? time += line[n].time - line[n + 1].time;
? ? ? if (dis > this.data.smoothness) break;
? ? }
? ? this.setData({
? ? ? radius: Math.min(time / len * this.data.pressure + this.data.lineMin, this.data.lineMax) * this.data.lineSize
? ? });
? ? line[0].r = this.data.radius;
? ? //計算筆跡半徑；
? ? if (line.length <= 2) {
? ? ? r0 = (lastRadius + this.data.radius) / 2;
? ? ? r1 = r0;
? ? ? r2 = r1;
? ? ? //return;
? ? } else {
? ? ? r0 = (line[2].r + line[1].r) / 2;
? ? ? r1 = line[1].r;
? ? ? r2 = (line[1].r + line[0].r) / 2;
? ? }
? ? let n = 5;
? ? let point = [];
? ? for (let i = 0; i < n; i++) {
? ? ? let t = i / (n - 1);
? ? ? let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
? ? ? let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
? ? ? let r = lastRadius + (this.data.radius - lastRadius) / n * i;
? ? ? point.push({ x: x, y: y, r: r });
? ? ? if (point.length == 3) {
? ? ? ? let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r);
? ? ? ? a[0].color = this.data.lineColor;
? ? ? ? // let bethelPoint = this.data.bethelPoint;
? ? ? ? // console.log(a)
? ? ? ? // console.log(this.data.bethelPoint)
? ? ? ? // bethelPoint = bethelPoint.push(a);
? ? ? ? this.bethelDraw(a, 1);
? ? ? ? point = [{ x: x, y: y, r: r }];
? ? ? }
? ? }
? ? this.setData({
? ? ? currentLine: line
? ? })
? },
? //求兩點之間距離
? distance (a, b) {
? ? let x = b.x - a.x;
? ? let y = b.y - a.y;
? ? return Math.sqrt(x * x + y * y);
? },
? ctaCalc (x0, y0, r0, x1, y1, r1, x2, y2, r2) {
? ? let a = [], vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
? ? vx01 = x1 - x0;
? ? vy01 = y1 - y0;
? ? norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
? ? vx01 = vx01 / norm * r0;
? ? vy01 = vy01 / norm * r0;
? ? n_x0 = vy01;
? ? n_y0 = -vx01;
? ? vx21 = x1 - x2;
? ? vy21 = y1 - y2;
? ? norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
? ? vx21 = vx21 / norm * r2;
? ? vy21 = vy21 / norm * r2;
? ? n_x2 = -vy21;
? ? n_y2 = vx21;
? ? a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: "#1A1A1A" });
? ? a.push({ c1x: x1 + n_x0, c1y: y1 + n_y0, c2x: x1 + n_x2, c2y: y1 + n_y2, ex: x2 + n_x2, ey: y2 + n_y2 });
? ? a.push({ c1x: x2 + n_x2 - vx21, c1y: y2 + n_y2 - vy21, c2x: x2 - n_x2 - vx21, c2y: y2 - n_y2 - vy21, ex: x2 - n_x2, ey: y2 - n_y2 });
? ? a.push({ c1x: x1 - n_x2, c1y: y1 - n_y2, c2x: x1 - n_x0, c2y: y1 - n_y0, ex: x0 - n_x0, ey: y0 - n_y0 });
? ? a.push({ c1x: x0 - n_x0 - vx01, c1y: y0 - n_y0 - vy01, c2x: x0 + n_x0 - vx01, c2y: y0 + n_y0 - vy01, ex: x0 + n_x0, ey: y0 + n_y0 });
? ? a[0].mx = a[0].mx.toFixed(1);
? ? a[0].mx = parseFloat(a[0].mx);
? ? a[0].my = a[0].my.toFixed(1);
? ? a[0].my = parseFloat(a[0].my);
? ? for (let i = 1; i < a.length; i++) {
? ? ? a[i].c1x = a[i].c1x.toFixed(1);
? ? ? a[i].c1x = parseFloat(a[i].c1x);
? ? ? a[i].c1y = a[i].c1y.toFixed(1);
? ? ? a[i].c1y = parseFloat(a[i].c1y);
? ? ? a[i].c2x = a[i].c2x.toFixed(1);
? ? ? a[i].c2x = parseFloat(a[i].c2x);
? ? ? a[i].c2y = a[i].c2y.toFixed(1);
? ? ? a[i].c2y = parseFloat(a[i].c2y);
? ? ? a[i].ex = a[i].ex.toFixed(1);
? ? ? a[i].ex = parseFloat(a[i].ex);
? ? ? a[i].ey = a[i].ey.toFixed(1);
? ? ? a[i].ey = parseFloat(a[i].ey);
? ? }
? ? return a;
? },
? bethelDraw (point, is_fill, color) {
? ? let ctx = this.data.ctx;
? ? ctx.beginPath();
? ? ctx.moveTo(point[0].mx, point[0].my);
? ? if (undefined != color) {
? ? ? ctx.setFillStyle(color);
? ? ? ctx.setStrokeStyle(color);
? ? } else {
? ? ? ctx.setFillStyle(point[0].color);
? ? ? ctx.setStrokeStyle(point[0].color);
? ? }
? ? for (let i = 1; i < point.length; i++) {
? ? ? ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
? ? }
? ? ctx.stroke();
? ? if (undefined != is_fill) {
? ? ? ctx.fill(); //填充圖形 ( 后繪制的圖形會覆蓋前面的圖形, 繪制時注意先后順序 )
? ? }
? ? ctx.draw(true)
? },
? selectColorEvent (event) {
? ? console.log(event)
? ? var color = event.currentTarget.dataset.colorValue;
? ? var colorSelected = event.currentTarget.dataset.color;
? ? this.setData({
? ? ? selectColor: colorSelected,
? ? ? lineColor: color
? ? })
? },
? // 設置背景函數(shù)
? //設置canvas背景色 ?不設置 ?導出的canvas的背景為透明?
? //@params：字符串 ?color
? setCanvasBg(color){
? ? /* 將canvas背景設置為 白底，不設置 ?導出的canvas的背景為透明 */
? ? //rect() 參數(shù)說明 ?矩形路徑左上角的橫坐標，左上角的縱坐標, 矩形路徑的寬度, 矩形路徑的高度
? ? //這里是 canvasHeight - 4 是因為下邊蓋住邊框了，所以手動減了寫
? ? this.data.ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight - 4); ?
? ? // ctx.setFillStyle('red')
? ? this.data.ctx.setFillStyle( color )
? ? this.data.ctx.fill() ?//設置填充
? ? this.data.ctx.draw() ? ?//開畫

? },
? //保存到相冊
? saveCanvasAsImg(){
? ? wx.canvasToTempFilePath({
? ? ? ? canvasId: 'handWriting',
? ? ? ? fileType: 'png',
? ? ? ? quality: 1, //圖片質量
? ? ? ? success(res) {
? ? ? ? ? ? // console.log(res.tempFilePath, 'canvas生成圖片地址');
? ? ? ? ? ? wx.saveImageToPhotosAlbum({
? ? ? ? ? ? ? ? filePath: res.tempFilePath,
? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? wx.showToast({
? ? ? ? ? ? ? ? ? ? ? ? title: '已保存到相冊',
? ? ? ? ? ? ? ? ? ? ? ? duration: 2000
? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? })
? },
? //預覽
? previewCanvasImg(){
? ? wx.canvasToTempFilePath({
? ? ? ? canvasId: 'handWriting',
? ? ? ? fileType: 'jpg',
? ? ? ? quality: 1, //圖片質量
? ? ? ? success(res) {
? ? ? ? ? ? // console.log(res.tempFilePath, 'canvas生成圖片地址');
? ? ? ? ? ? wx.previewImage({
? ? ? ? ? ? ? ? urls: [res.tempFilePath], //預覽圖片 數(shù)組
? ? ? ? ? ? })
? ? ? ? }
? ? })
? },
? //上傳
? uploadCanvasImg() {
? ? wx.canvasToTempFilePath({
? ? ? ? canvasId: 'handWriting',
? ? ? ? fileType: 'png',
? ? ? ? quality: 1, //圖片質量
? ? ? ? success(res) {
? ? ? ? ? ? // console.log(res.tempFilePath, 'canvas生成圖片地址');
? ? ? ? ? ? //上傳
? ? ? ? ? ? wx.uploadFile({
? ? ? ? ? ? ? ? url: 'https://example.weixin.qq.com/upload', // 僅為示例，非真實的接口地址
? ? ? ? ? ? ? ? filePath: res.tempFilePath,
? ? ? ? ? ? ? ? name: 'file_signature',
? ? ? ? ? ? ? ? formData: {
? ? ? ? ? ? ? ? ? ? user: 'test'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? success(res) {
? ? ? ? ? ? ? ? ? ? const data = res.data
? ? ? ? ? ? ? ? ? ? // do something
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? })
? },
? // 完成 ?導出圖片
? base64(url, type) {
? ? return new Promise((resolve, reject) => {
? ? ? wx.getFileSystemManager().readFile({
? ? ? ? filePath: url,
? ? ? ? encoding: 'base64',
? ? ? ? success(res){
? ? ? ? ? resolve('data:image/'+type.toLocaleLowerCase()+';base64,'+res.data)
? ? ? ? },
? ? ? ? fail(){
? ? ? ? ? reject()
? ? ? ? }
? ? ? })
? ? })
? },
? subCanvas(){
? ? const that=this;
? ? this.data.ctx.draw(false, wx.canvasToTempFilePath({
? ? ? canvasId: 'handWriting',
? ? ? fileType: 'jpg',
? ? ? quality: 1, //圖片質量
? ? ? success(res) {
? ? ? ? let url = res.tempFilePath
? ? ? ? that.base64(url, 'jpg').then(res => {
? ? ? ? ? var pages = getCurrentPages();
? ? ? ? ? var prevPage = pages[pages.length - 2]; //上一個頁面
? ? ? ? ? ?//直接調用上一個頁面的setData()方法，把數(shù)據(jù)存到上一個頁面中去
? ? ? ? ? prevPage.setSign(res)
? ? ? ? ? wx.navigateBack({//返回
? ? ? ? ? ? delta: 1
? ? ? ? ? })
? ? ? ? })
? ? ? },
? ? ? fail() {
? ? ? ? wx.showToast({
? ? ? ? ? title: '導出失敗',
? ? ? ? ? icon: 'none',
? ? ? ? ? duration: 2000
? ? ? ? })
? ? ? }
? ? })
? ? )
? }
})

<view class="sign" bindtap="signName">
? ? ? <view class="sign-title">檢查員簽名：
? ? ? </view>
? ? ? <view class="sign-img">
? ? ? ? <image src="{{base64ImgUrl}}"></image>
? ? ? </view>
? ? </view>

// 跳簽名板頁面
? setSign(value) {
? ? wx.setStorageSync('signImg2', value)
? ? this.setData({
? ? ? base64ImgUrl: value
? ? })
? },
? signName() {
? ? wx.navigateTo({
? ? ? url: '../sign_name/index?names=signImg2',
? ? })
? },