小程序做签名功能生成签名后生成海报上传到服务端

刺骨的言语ヽ痛彻心扉 2021-11-23 10:28 367阅读 0赞

![签名之前的状态][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70]![签名后生成的整张页面的图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 1]

以上是效果图：

wxml:

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">
        <cover-view class="controls" bindtouchstart='signature' wx:if="{
       {noData}}">签名栏</cover-view>
    </canvas>
    
    //这是生成整张页面的画布
    <canvas canvas-id="shareCanvas" id='shareCanvas'></canvas>

wxss:

#shareCanvas{
      width:100%;
      height:1006rpx;
      background:rgba(236, 236, 236, 1);
    }
    .canvas {
      width: 100%;
      height: 666rpx;
      background:rgba(255,255,255,1);
      border-radius:10rpx;
    } 
    .controls{
      width:175rpx;
      font-size:60rpx;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(203,203,203,1);
      position: relative;
      top:50%;
      left:50%;
      transform: translate(-50%,-50%)
    }

js:

var context = null;
    var canvasCtx = null;
    var isButtonDown = false;
    var arrx = [];
    var arry = [];
    var arrz = [];
    var canvasw = 0;
    var canvash = 0;
    Page({
        canvasIdErrorCallback: function (e) {
            console.error(e.detail.errMsg)
      },
        canvasStart: function (event) {
            isButtonDown = true;
            arrz.push(0);
            arrx.push(event.changedTouches[0].x);
            arry.push(event.changedTouches[0].y);
      },
        canvasMove: function (event) {
            var that = this
            that.setData({ noData:false})
            if (isButtonDown) {
              arrz.push(1);
              arrx.push(event.changedTouches[0].x);
              arry.push(event.changedTouches[0].y);
            };
            for (var i = 0; i < arrx.length; i++) {
              if (arrz[i] == 0) {
                context.moveTo(arrx[i], arry[i])
              } else {
                context.lineTo(arrx[i], arry[i])
              };
            };
            context.clearRect(0, 0, 375, 333);
            context.setStrokeStyle('#000000');
            context.setLineWidth(4);
            context.setLineCap('round');
            context.setLineJoin('round');
            context.stroke();
            context.draw(false);
       },
        canvasEnd: function (event) {
            isButtonDown = false;
       },
        //清除画布
        cleardraw: function () {
            let that = this;
            arrx = [];
            arry = [];
            arrz = [];
            context.draw(false);
        },
        onLoad: function (options) {
            // 使用 wx.createContext 获取绘图上下文 context和canvasCtx
            context = wx.createCanvasContext('canvas');
            context.beginPath()
            context.setStrokeStyle('#000000');
            context.setLineWidth(4);
            context.setLineCap('round');
            context.setLineJoin('round');
            context.setFillStyle('white');
            context.draw();
            canvasCtx = wx.createCanvasContext('shareCanvas');
            context.draw();
        },
    // 点击保存签名
      clickMe: function () {
        let that = this;
        wx.canvasToTempFilePath({
          canvasId: 'canvas',
          success: function (res) {
             that.submitPreser(res.tempFilePath)//生成签名的临时路径
          },
          fail: function () {
             wx.showToast({
               title: '保存签名失败，请重新签名',
               icon: 'none'
             })
          }
        })
      },
    //保存生成临时路径后画图以便接下来的提交操作
      submitPreser(resTempFilePath){
        let resPhone = {};
        try {
          resPhone = wx.getSystemInfoSync()
        } catch (e) {
          resPhone = {
            screenHeight: 667,
            screenWidth: 375
          }
        }
        let rpx = resPhone.screenWidth / 375; //计算不同型号手机的宽高以及位置适配
        that.fillRoundRect(canvasCtx, 0, 0, 350 * rpx, 88 * rpx, 5 * rpx, '#FFFFFF', 4)
        canvasCtx.setFillStyle('#333333');
        canvasCtx.font = "bold 14px pingFang SC-Bold";
        canvasCtx.setFontSize(14);
        canvasCtx.fillText(`姓    名：${that.data.studentInfos.studentName}`,  9* rpx, 24 * rpx);
        canvasCtx.drawImage(`http://xlrtimo.oss-cn-beijing.aliyuncs.com/HorseScoutData/teacher/primarySchool/${that.data.studentInfos.gender==1?'man3':'woman3'}.png`, 118 * rpx, 13.5 * rpx, 10 * rpx, 10 * rpx);
        canvasCtx.fillText(`学    号：${that.data.studentInfos.registerCode}`, 9 * rpx, 51 * rpx);
        canvasCtx.fillText(`班    级：${that.data.studentInfos.gradeName}${that.data.studentInfos.studentClass}班`, 9 * rpx, 75 * rpx);
        that.fillRoundRect(canvasCtx, 0, 98 * rpx, 350 * rpx, 62 * rpx, 5 * rpx, '#FFFFFF', 4)
        canvasCtx.font = "500 15px PingFang-SC-Medium";
        canvasCtx.setFontSize(15);
        canvasCtx.fillText('考试项目', 9 * rpx, 120 * rpx);
        canvasCtx.setFontSize(13);
        canvasCtx.setFillStyle('#8E8E8E');
        canvasCtx.fillText(that.data.studentInfos.examItemName, 9 * rpx, 145 * rpx);
        if (that.data.studentInfos.examUnit != '99'){
          canvasCtx.fillText(that.data.studentInfos.resultValue + that.data.studentInfos.examUnit, 200 * rpx, 145 * rpx);
        }
        that.fillRoundRect(canvasCtx, 245 * rpx, 133.5 * rpx, 40 * rpx, 15 * rpx, 4 * rpx, '#209C7F', 4)
        that.fillRoundRect(canvasCtx, 295 * rpx, 133.5 * rpx, 45 * rpx, 15 * rpx, 4 * rpx, '#CBCBCB', 4)
        canvasCtx.setFillStyle('#FFFFFF');
        canvasCtx.setFontSize(11);
        canvasCtx.fillText(`${that.data.studentInfos.score < 100 ? '  ' +that.data.studentInfos.score :that.data.studentInfos.score}分`, 248 * rpx, 145 * rpx);
        canvasCtx.fillText(`${that.data.studentInfos.scoreLevel == 1 ? '  优秀' : that.data.studentInfos.scoreLevel == 2 ? '  良好' : that.data.studentInfos.scoreLevel == 3 ? '  及格' : '不及格'}`, 300 * rpx, 145 * rpx);
        that.fillRoundRect(canvasCtx, 0, 170 * rpx, 350 * rpx, 333 * rpx, 5 * rpx, '#FFFFFF', 4)
        canvasCtx.drawImage(resTempFilePath, 0 * rpx, 170 * rpx, 350 * rpx, 333 * rpx);
        canvasCtx.draw(false,function(){
          setTimeout(function () {
            wx.canvasToTempFilePath({
              canvasId: 'shareCanvas',
              success: function (res) {
                that.setData({ tempFilePath: res.tempFilePath })
                arrx = [];
                arry = [];
                arrz = [];
                context.draw(false);
                that.subPreservation()
              },
              fail: function (data) {
                wx.hideLoading()
              },
            })
          }, 500)
        }); 
      },
        //提交到后台
       subPreservation: function(){ 
         wx.uploadFile({
          url: app.url + '/v1/file/upload',//服务器接口地址 
          header: {"token": ""},
          filePath: that.data.tempFilePath,
          name: 'muFiles',
          formData: { 'type': 'teacher_img'},
          success: function (re) {
            let data = JSON.parse(re.data)
            that.setData({imgUrl:data.response[0]})
          },fail:function(data){
            wx.showToast({
              title: '提交失败，请重新签名提交',
              icon:'none'
            })
          }
        })
      },
    //这是绘制倒角的元素
    fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor, num) {
        //圆的直径必然要小于矩形的宽高          
        if (2 * radius > width || 2 * radius > height) { return false; }
        cxt.save();
        cxt.translate(x, y);
        //绘制圆角矩形的各个边  
        drawRoundRectPath(cxt, width, height, radius, num);
        cxt.fillStyle = fillColor || "#000";
        cxt.fill();
        cxt.restore();
      },
    })
    
    function drawRoundRectPath(cxt, width, height, radius, num) {
      cxt.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI  
      cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
    
      //矩形下边线  
      cxt.lineTo(radius, height);
    
      //左下角圆弧，弧度从1/2PI到PI  
      cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
    
      //矩形左边线  
      cxt.lineTo(0, radius);
    
      //左上角圆弧，弧度从PI到3/2PI  
      cxt.arc(radius, num == 1 ? 0 : radius, radius, Math.PI, Math.PI * 3 / 2);
    
      //上边线  
      cxt.lineTo(width - radius, 0);
    
      //右上角圆弧  
      cxt.arc(width - radius, num == 1 ? 0 : radius, radius, Math.PI * 3 / 2, Math.PI * 2);
    
      //右边线  
      cxt.lineTo(width, height - radius);
      cxt.closePath();
    }

写的比较乱，也是借鉴了网上的示例捣鼓出来的，哈哈，也算是第一次做签名功能的一次总结！不明白的地方欢迎留言，看到第一时间回复！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190726155417339.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pa2VfY2hlbjJzdG9ja2luZ3M_size_16_color_FFFFFF_t_70 1]: /images/20211122/75501fb5098c4441a32a6afffca2c4e9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

相关 oss服务端签名后直传分析与代码实现

oss对象存储两种上传方式：oss普通上传方式与oss服务端签名后直传利弊分析，服务端签名后直传文档，签名直传服务返回给客户端消息Body内容的各字段说明，服务端签名后直...

Dear 丶/ 2024年04月24日 14:35/ 0 赞/ 67 阅读

相关 java后端获取微信jssdk并生成签名

.主体代码 /** * 获取jssdk * @param url * @return * @throws Exc...

Bertha 。/ 2024年04月17日 17:51/ 0 赞/ 76 阅读

相关四步解决！OSS对象存储文件上传功能（服务端签名后直传，建议收藏）

开始之前先来带大家看看普通上传方式和服务端签名后直传的区别！ ![在这里插入图片描述][880eddea3b984e25aa664e4c35d31614.gif_pic_ce

Dear 丶/ 2022年10月05日 10:51/ 0 赞/ 509 阅读

相关服务器生成小程序页面,Python服务端如何生成小程序码

最近搞了一个小程序，然后要生成分享的小程序码，每个码不同，携带不同的参数，查阅了微信小程序官方的文档，最后决定在服务端升级小程序码通常分两种，一种是路径长度可以很长(携带很

痛定思痛。/ 2022年09月04日 04:45/ 0 赞/ 156 阅读

相关 php生成签名sign

一、描述就安全来说，所有客户端和服务器端的通信内容应该都要通过加密通道(HTTPS)传输，明文的HTTP通道将会是man-in-the- middle及其各种变种攻击的温

素颜马尾好姑娘i/ 2022年05月29日 00:27/ 0 赞/ 527 阅读

相关 API接口签名生成算法和签名验证算法

1、参考网上资料和书本资料，实现了API接口签名生成算法和签名验证算法。（1）参考资料：[https://www.jianshu.com/p/d47da77b6419]

比眉伴天荒/ 2022年03月30日 09:07/ 0 赞/ 646 阅读

相关 apk生成签名文件

cmd生成.keystore签名文件 1.找到本机电脑上jdk安装的目录的bin目录，使用cmd命令打开命令窗口 ![watermark_type_ZmFuZ3poZW5n

ゝ一纸荒年。/ 2021年12月03日 02:51/ 0 赞/ 435 阅读

相关小程序做签名功能生成签名后生成海报上传到服务端

![签名之前的状态][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

刺骨的言语ヽ痛彻心扉/ 2021年11月23日 10:28/ 0 赞/ 368 阅读

相关生成app包签名步骤

开发混合app上架应用市场，需要进行应用签名，但是申请签名如果没搞过，会特别麻烦，所以我自自己总结了一下申请的步骤，在此记录一下 1.首先需要下载安装java环境即jdk，

淩亂°似流年/ 2021年10月01日 00:10/ 0 赞/ 431 阅读

相关 OSS获得阿里云服务端签名——服务端签名后直传

一任务 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

你的名字/ 2021年07月24日 12:48/ 0 赞/ 581 阅读