你好
我在开发的过程中有一个签字的功能，在开发中工具和真机调试运转良好，但是在正式版无法正常使用。我无法调试和找到问题，请问有人能帮助我吗？
下面是功能的核心代码。
// 签字区域开始 ------------------------------
StartSgin(event) {
this.setData({
Sgin: true,
SginIndex: event.currentTarget.dataset.fileindex
})
var _self = this;
const query = wx.createSelectorQuery();
query.select('#canvas').fields({ node: true, size: true }).exec((res) => {
_self.init(res);
})
},
init(data) {
const width = data[0].width;
const height = data[0].height;
const canvas = data[0].node;
const ctx = canvas.getContext('2d');
ctx.lineWidth = 6;
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
this._dpr = dpr
this._ctx = ctx
this._canvas = canvas
},
touchStart(e) {
const { _ctx: ctx } = this
const { clientX: x, clientY: y } = e.touches[0]
ctx.beginPath()
ctx.lineWidth = 6;
ctx.moveTo(x - e.target.offsetLeft, y - e.target.offsetTop)
this.setData({
preX: x - e.target.offsetLeft,
preY: y - e.target.offsetTop,
})
},
touchMove(e) {
const { _ctx: ctx } = this
ctx.lineWidth = 6;
const { clientX: x, clientY: y } = e.touches[0]
this.data.signPath.push([x, y])
this.setData({
signPath: this.data.signPath
})
let preX = this.data.preX
let preY = this.data.preY
let curX = x - e.target.offsetLeft
let curY = y - e.target.offsetTop
let deltaX = Math.abs(preX - curX)
let deltaY = Math.abs(preY - curY)
if (deltaX >= 3 || deltaY >= 3) {
// 前后两点中心点
let centerX = (preX + curX) / 2
let centerY = (preY + curY) / 2
//这里以前一点作为控制点，中心点作为终点，起始点为上一次的中点，很流畅啊！
ctx.quadraticCurveTo(preX, preY, centerX, centerY);
ctx.stroke();
this.setData({
preX: curX,
preY: curY,
})
}
},
//重绘
reset() {
const { _ctx: ctx, _canvas: canvas } = this
this.setData({
signPath: []
})
ctx.clearRect(0, 0, canvas.width, canvas.height)
},
//提交签名图片
sure() {
if (this.data.signPath.length <= 0) {
wx.showToast({
title: '签名不能为空',
icon: 'none'
})
return
}
//关闭弹窗
this.setData({
Sgin: false
})
wx.showLoading({
title: '合成中',
})
//导出图片
this.outImage()
},
sureSignature() {
if (this.data.signPath.length <= 0) {
wx.showToast({
title: '签名不能为空',
icon: 'none'
})
return
}
},
outImage() {
const { _canvas: canvas, _dpr: dpr } = this
var image = canvas.toDataURL("image/png"); // 得到生成后的签名base64位 url 地址
const _self = this
const query = wx.createSelectorQuery();
query.select('#xuanzhuan').fields({ node: true, size: true }).exec((data) => {
const canvasA = data[0].node;
let sealA = canvasA.createImage();
sealA.src = image;
sealA.onload = () => {
canvasA.width = sealA.width;
canvasA.height = sealA.height;
var context = canvasA.getContext("2d");
context.rect(0, 0, canvasA.width, canvasA.height);
let rate = canvasA.height / canvasA.width
let width = canvasA.height / rate
let height = canvasA.width
context.translate(height / 2, width / 2)
context.rotate((270 * Math.PI) / 180)
context.drawImage(sealA, -width / 2, -height / 2, width, height)
var bASEa = canvasA.toDataURL("image/png"); // 得到生成后的签名base64位 url 地址
this.drawAndShareImage(bASEa);
}
})
},
//合成图片
drawAndShareImage(image) {
var _self = this;
wx.getImageInfo({
src: _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].SginPhoto,
success: function (res) {
const query = wx.createSelectorQuery();
query.select('#synthesis').fields({ node: true, size: true }).exec((data) => {
// var canvas = document.getElementById("synthesis");
const canvas = data[0].node;
canvas.width = res.width;
canvas.height = res.height;
var context = canvas.getContext("2d");
context.rect(0, 0, canvas.width, canvas.height);
let seal = canvas.createImage();
seal.src = _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].SginPhoto;
seal.onload = () => {
// ctx.drawImage(seal, 80, 940, 150, 150);
context.drawImage(seal, 0, 0, res.width, res.height);
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
let sealA = canvas.createImage();
sealA.src = image;
sealA.onload = () => {
// ctx.drawImage(seal, 80, 940, 150, 150);
context.drawImage(sealA, _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].x, _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].y, _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].w, _self.data.tollDetails.areaFileConfig[_self.data.SginIndex].h);
// context.drawImage(res1, );
var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
// var img = document.getElementById('avatar');
let Src = _self.baesSrc(base64);
uploadFileR(Src).then(res => {
_self.data.tollDetails.areaFileConfig[_self.data.SginIndex].Src = res.response.response
_self.data.tollDetails.areaFileConfig[_self.data.SginIndex].showSrc = res.response.path
_self.setData({
'tollDetails.areaFileConfig': _self.data.tollDetails.areaFileConfig
})
wx.hideLoading()
})
console.log(Src, '生成的图片链接')
//清空签名
_self.reset();
}
}
})
},
fail(res) {
}
})
},
baesSrc(base64data) {
const base64 = base64data; //base64格式图片
const time = new Date().getTime();
const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
//如果图片字符串不含要清空的前缀,可以不执行下行代码.
const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
const file = wx.getFileSystemManager();
file.writeFileSync(imgPath, imageData, "base64");
return imgPath;
},
// 签字区域结束 --------------------------
