小程序中使用CANVAS实现手写签名并写入模板图片中

实测，开发者工具中滚动条位置会影响书写，显示会有些问题，并且会卡顿，安卓、苹果手机上测试正常

  index.js

const App = getApp();
 
Page({
 
    /**
     * 页面的初始数据
     */
    data: {
      curScrollTop : 0
    },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
 
    },
 
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
 
    },
 
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      if(this.data.showBigResImgPop){
        this.setData({
          showBigResImgPop : false
        })
      }else{
        // this.init();
      }
    },
    
    
    
    /**
     * 写入签名生成图片
     */
    onPageScroll:function(e){ // 获取滚动条当前位置
      this.setData({
        curScrollTop : e.scrollTop
      })
      // console.log(this.data.curScrollTop)
    },
    writeSignatureDo(){
      this.setData({
        showWriteSignature : true,
      })
      // 写入签名生成图片
      this.writeSignature();
    },
    writeSignature(){
      if(!this.data._left && !this.data._top){
        console.log(1111)
        const query1 = wx.createSelectorQuery();
        query1.select('#writeSignatureCanvasBox').boundingClientRect((res)=>{
          // console.log(res)
          this.setData({
            _left : res.left,
            _top : res.top,
          })
        }).exec()
        
        const query = wx.createSelectorQuery();
        query.select('#writeSignatureCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          // console.log(res);
          // const canvas = res[0].node;
          // console.log('canvas初始宽高', canvas.width, canvas.height);
          this.setData({
            canvas : res[0].node,
            screenWidth : wx.getSystemInfoSync().screenWidth,
            screenWidthHalf : wx.getSystemInfoSync().screenWidth / 2,
          })
          // console.log('canvas初始宽高', this.data.canvas.width, this.data.canvas.height);
          
          // /* START 不设置 CANVAS宽高时，canvas.width=300，canvas.height=150，ctx.lineWidth可以对应设置 细 一些 */
          // // setNameMouseX : (e.touches[0].pageX - this.data._left + ((this.data.screenWidth - this.data.canvas.width) / 2)) * (this.data.canvas.width / this.data.screenWidth),
          // // setNameMouseY : (e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - this.data.canvas.height) / 2)) * (this.data.canvas.height / this.data.screenWidthHalf),
          // /* END */
          
          // /* START 设置 CANVAS宽高时，触摸画线根据CANVAS宽高计算标准必须是 300 | 150，ctx.lineWidth可以对应设置 稍粗 一些 */
          // this.data.canvas.width = this.data.screenWidth;
          // this.data.canvas.height = this.data.screenWidthHalf;
          // // setNameMouseX : e.touches[0].pageX - this.data._left + ((this.data.screenWidth - 300) / 2),
          // // setNameMouseY : e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - 150) / 2),
          // /* END */
          
          /* START 设置 CANVAS宽高 * dpr 时，触摸画线根据CANVAS宽高计算标准必须是 300 * dpr | 150 * dpr，ctx.lineWidth可以对应设置 粗 一些 */
          this.setData({
            dpr : wx.getSystemInfoSync().pixelRatio
          })
          this.data.canvas.width = this.data.screenWidth * this.data.dpr;
          this.data.canvas.height = this.data.screenWidthHalf * this.data.dpr;
          // setNameMouseX : e.touches[0].pageX * this.data.dpr - this.data._left * this.data.dpr + ((this.data.screenWidth * this.data.dpr - 300 * this.data.dpr) / 2),
          // setNameMouseY : e.touches[0].pageY * this.data.dpr - this.data._top * this.data.dpr + ((this.data.screenWidthHalf * this.data.dpr - 150 * this.data.dpr) / 2),
          // y轴滚动条影响手写内容处理
          //  - this.data.curScrollTop * this.data.dpr
          /* END */
          
          this.setData({
            writeSignatureCanvasW : this.data.screenWidth,
            writeSignatureCanvasH : this.data.screenWidthHalf,
          })
          
          // const ctx = canvas.getContext('2d');
          this.setData({
            ctx : this.data.canvas.getContext('2d')
          })
          
          this.data.ctx.strokeStyle = "#4FADF8";
          this.data.ctx.lineWidth = 14;
          this.data.ctx.clearRect(0, 0, this.data.canvas.width, this.data.canvas.height);
        })
      }else{
        console.log(2222)
        this.data.ctx.clearRect(0, 0, this.data.canvas.width, this.data.canvas.height);
      }
    },
    writeSignatureCanvasTouchStartEvent(e){
      // console.log(e)
      this.setData({
        // setNameMouseX : (e.touches[0].pageX - this.data._left + ((this.data.screenWidth - this.data.canvas.width) / 2)) * (this.data.canvas.width / this.data.screenWidth),
        // setNameMouseY : (e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - this.data.canvas.height) / 2)) * (this.data.canvas.height / this.data.screenWidthHalf),
        
        // setNameMouseX : e.touches[0].pageX - this.data._left + ((this.data.screenWidth - 300) / 2),
        // setNameMouseY : e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - 150) / 2),
        
        setNameMouseX : e.touches[0].pageX * this.data.dpr - this.data._left * this.data.dpr + ((this.data.screenWidth * this.data.dpr - 300 * this.data.dpr) / 2),
        setNameMouseY : e.touches[0].pageY * this.data.dpr - this.data._top * this.data.dpr + ((this.data.screenWidthHalf * this.data.dpr - 150 * this.data.dpr) / 2) - this.data.curScrollTop * this.data.dpr,
      })
      
    	this.data.ctx.beginPath();
    	this.data.ctx.moveTo(this.data.setNameMouseX,this.data.setNameMouseY);
    },
    writeSignatureCanvasTouchEndEvent(e){
      // console.log(e)
      this.setData({
        setNameMouseX : null,
        setNameMouseY : null,
      })
      this.setData({
        showResButton : true
      })
    },
    writeSignatureCanvasTouchMoveEvent(e){
      this.setData({
        // setNameMouseX : (e.touches[0].pageX - this.data._left + ((this.data.screenWidth - this.data.canvas.width) / 2)) * (this.data.canvas.width / this.data.screenWidth),
        // setNameMouseY : (e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - this.data.canvas.height) / 2)) * (this.data.canvas.height / this.data.screenWidthHalf),
        
        // setNameMouseX : e.touches[0].pageX - this.data._left + ((this.data.screenWidth - 300) / 2),
        // setNameMouseY : e.touches[0].pageY - this.data._top + ((this.data.screenWidthHalf - 150) / 2),
        
        setNameMouseX : e.touches[0].pageX * this.data.dpr - this.data._left * this.data.dpr + ((this.data.screenWidth * this.data.dpr - 300 * this.data.dpr) / 2),
        setNameMouseY : e.touches[0].pageY * this.data.dpr - this.data._top * this.data.dpr + ((this.data.screenWidthHalf * this.data.dpr - 150 * this.data.dpr) / 2) - this.data.curScrollTop * this.data.dpr,
      })
      
    	this.data.ctx.lineTo(this.data.setNameMouseX,this.data.setNameMouseY);
    	this.data.ctx.stroke();
    },
    // 重写
    reSetWriteSignatureCanvas(){
      this.setData({
        showResButton : false
      })
      this.data.ctx.clearRect(0, 0, this.data.canvas.width, this.data.canvas.height);
    },
    // 确定
    setWriteSignatureCanvas(){
      this.setData({
        showWriteSignature : false,
        writeSignatureImg : this.data.canvas.toDataURL('image/png'),
      })
      this.reSetWriteSignatureCanvas();
      // 写入海报，生成最终图片
      this.makeResImg();
    },
    
    
    
    /**
     * 写入海报，生成最终图片
     */
    makeResImg() {
      if(this.data.posterCanvas){
        console.log(4444)
        this.makeResImgAfter();
      }else{
        console.log(3333)
        const query = wx.createSelectorQuery();
        query.select('#makeResCanvas')
        .fields({
          node: true,
          size: true
        })
        .exec((res) => {
          // // console.log(res);
          // const canvas = res[0].node;
          // // console.log('canvas初始宽高', canvas.width, canvas.height);
          // const ctx = canvas.getContext('2d');
          
          this.setData({
            posterCanvas : res[0].node,
          })
          
          this.setData({
            posterCtx : this.data.posterCanvas.getContext('2d'),
          })
          
          // const dpr = wx.getSystemInfoSync().pixelRatio;
          // console.log(dpr);
          // canvas.width = res[0].width * dpr;
          // canvas.height = res[0].height * dpr;
          // console.log(canvas.width , canvas.height)
          // ctx.scale(dpr, dpr);
          
          this.makeResImgAfter();
        })
      }
    },
    makeResImgAfter(){
      this.data.posterCtx.clearRect(0, 0, this.data.posterCanvas.width, this.data.posterCanvas.height);
      // 写入 生成图片 背景图片
      const posterBgImg = this.data.posterCanvas.createImage();
      posterBgImg.src = '../../images/form-img.png';
      posterBgImg.onload = () => {
        // console.log('背景图实际宽高', posterBgImg.width, posterBgImg.height);
        this.data.posterCanvas.width = posterBgImg.width;
        this.data.posterCanvas.height = posterBgImg.height;
        this.setData({
          // makeResCanvasW: posterBgImg.width,
          // makeResCanvasH: posterBgImg.height,
          // makeResCanvasW:750,
          // makeResCanvasH:750 / posterBgImg.width * posterBgImg.height,
          makeResCanvasW:0,
          makeResCanvasH:0,
        })
        // console.log('this.data.posterCanvas宽高设置与背景图一致', this.data.posterCanvas.width, this.data.posterCanvas.height);
        this.data.posterCtx.drawImage(posterBgImg, 0, 0, posterBgImg.width, posterBgImg.height);
        // 写入勾选项图片
        const checkImg = this.data.posterCanvas.createImage();
        checkImg.src = '../../images/check.png';
        checkImg.onload = () => {
          // 画入签名图片
          const reSetWriteSignatureImg = this.data.posterCanvas.createImage();
          reSetWriteSignatureImg.src = this.data.writeSignatureImg;
          reSetWriteSignatureImg.onload = () => {
            this.data.posterCtx.drawImage(reSetWriteSignatureImg, 1892, 2848, 350, 175);
            // 设置勾选项
            this.data.posterCtx.drawImage(checkImg, 558, 1895, 32, 24);
            this.data.posterCtx.drawImage(checkImg, 1443, 1895, 32, 24);
            this.data.posterCtx.drawImage(checkImg, 1443, 2047, 32, 24);
            // 写入文本
            this.data.posterCtx.fillStyle = '#4FADF8';
            this.data.posterCtx.textAlign = 'left';
            this.data.posterCtx.textBaseline = 'top';
            this.data.posterCtx.font = '46px "PingFangSC-Regular","STHeitiSC-Light","微软雅黑","Microsoft YaHei","sans-serif"';
            this.data.posterCtx.fillText('客户姓名',545,384);
            // 写入多行文本
            // this.writeTextOnCanvas(this.data.posterCtx, 42, 40, '写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本写入多行文本' ,562, 1350);
            let add = '北京市北京市东城区东华门街道';
            add = '北京市北京市东城区东华门街道多四个字';
            if(add.length > 14){
              this.writeTextOnCanvas(this.data.posterCtx, 52, 30, add ,1716, 869);
            }else{
              this.data.posterCtx.fillText(add,1716,895);
            }
            this.data.posterCtx.fillText('企业详细地址',545,1064);
            let date = new Date()
            this.data.posterCtx.fillText(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate(),1892,3035);
            
            // 生成最终图片
            this.setData({
              posterUrl: this.data.posterCanvas.toDataURL('image/png'),
            })
          }
        }
      }
    },
    // 查看大图
    showBigResImg(){
      this.setData({
        showBigResImgPop : true
      })
      wx.previewImage({
        current: this.data.posterUrl,
        urls: [this.data.posterUrl]
      });
    },
    // 写入多行文本
    //ctx_2d		getContext("2d") 对象
    //lineheight	段落文本行高
    //bytelength	设置单字节文字一行内的数量
    //text			写入画面的段落文本
    //startleft		开始绘制文本的 x 坐标位置（相对于画布）
    //starttop		开始绘制文本的 y 坐标位置（相对于画布）
    writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
    	function getTrueLength(str){//获取字符串的真实长度（字节长度）
    		var len = str.length, truelen = 0;
    		for(var x = 0; x < len; x++){
    			if(str.charCodeAt(x) > 128){
    				truelen += 2;
    			}else{
    				truelen += 1;
    			}
    		}
    		return truelen;
    	}
    	function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置
    		var len = str.length, tlen = len, nlen = 0;
    		for(var x = 0; x < len; x++){
    			if(str.charCodeAt(x) > 128){
    				if(nlen + 2 < leng){
    					nlen += 2;
    				}else{
    					tlen = x;
    					break;
    				}
    			}else{
    				if(nlen + 1 < leng){
    					nlen += 1;
    				}else{
    					tlen = x;
    					break;
    				}
    			}
    		}
    		return tlen;
    	}
    	for(var i = 1; getTrueLength(text) > 0; i++){
    		var tl = cutString(text, bytelength);
    		ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
    		text = text.substr(tl);
    	}
    },
    
    
 
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
 
    },
 
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
 
    },
 
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
 
    },
 
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
 
    },
 
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
 
    }
})

 index.wxml

<button bindtap="writeSignatureDo" style="background-color: #0FC393;">我要签名</button>
<view wx:for="{{5}}">
  <view>1111</view>
  <view>2222</view>
  <view>3333</view>
  <view>5555</view>
  <view>6666</view>
  <view>7777</view>
  <view>8888</view>
  <view>9999</view>
</view>
<button bindtap="writeSignatureDo" style="background-color: #0FC393;">我要签名</button>
<image wx:if="{{writeSignatureImg}}" src="{{writeSignatureImg}}" mode="widthFix"></image>
 
<!--  -->
 
<view>
 <canvas type="2d" id="makeResCanvas"  style="width: {{makeResCanvasW}}rpx;height: {{makeResCanvasH}}rpx;"></canvas>
 <image bindtap="showBigResImg" wx:if="{{posterUrl}}" src="{{posterUrl}}" mode="widthFix" style="width: 100%;"></image>
</view>
 
<view class="flex-dir-column flex-x-center flex-y-center" style="width: 100%; height: 100%; background-color: rgba(0,0,0,.5); position: fixed; left: 0; top: 0; {{showWriteSignature ? 'display: flex !important;' : 'display: none !important;'}}">
  <view style="text-align: center; color: #fff; margin-bottom: 30rpx;">请写入签名</view>
  <view id="writeSignatureCanvasBox">
    <canvas type="2d" id="writeSignatureCanvas" catch:touchstart="writeSignatureCanvasTouchStartEvent" catch:touchend="writeSignatureCanvasTouchEndEvent" catch:touchmove="writeSignatureCanvasTouchMoveEvent" style="width: {{writeSignatureCanvasW}}px;height: {{writeSignatureCanvasH}}px; background-color: #fff;"></canvas>
  </view>
  <view class="dis-flex flex-x-center flex-y-center" style="width: 50%; height: 80rpx; margin-top: 30rpx;">
    <button catchtap="reSetWriteSignatureCanvas" wx:if="{{showResButton}}" type="default" style="height: 80rpx;line-height: 80rpx;">重写</button>
    <button catchtap="setWriteSignatureCanvas" wx:if="{{showResButton}}" type="default" style="height: 80rpx;line-height: 80rpx;">确定</button>
  </view>
</view>

素材图片：