H5+APP 签字

function lineCanvas(obj) {
    this.linewidth = 5;
    this.color = "#8080ff";
    this.background = "#ffffff";
    for (var i in obj) {
        this[i] = obj[i];
    };
    this.canvas = document.createElement("canvas");
    this.el.appendChild(this.canvas);
    this.cxt = this.canvas.getContext("2d");
    this.canvas.width = this.el.clientWidth;
    this.canvas.height = this.el.clientHeight;
    this.cxt.fillStyle = this.background;
    this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.cxt.strokeStyle = this.color;
    //this.ctx.createLinearGradient(0,0,50,50);
    
    this.cxt.lineWidth = this.linewidth;
    this.cxt.lineCap = "round";
    //开始绘制
    this.canvas.addEventListener("touchstart", function(e) {
        this.cxt.beginPath();
        this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
    }.bind(this), false);
    //绘制中
    this.canvas.addEventListener("touchmove", function(e) {
        this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
        this.cxt.stroke();
    }.bind(this), false);
    //结束绘制
    this.canvas.addEventListener("touchend", function() {
        this.cxt.closePath();
    }.bind(this), false);
    //清除画布
    this.clearEl.addEventListener("click", function() {
        this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }.bind(this), false);
    //保存图片，直接转base64
    this.saveEl.addEventListener("click", function() {
        var imgBase64 = this.canvas.toDataURL();
        base64Image=imgBase64;
        //var file=dataURLtoFile(imgBase64,"签字.png");
        
        AnnoSvc.UploadSignImg(svcOrderId,imgBase64,function(result){
            //console.log("上传结果"+JSON.stringify(result));
            if(result.code==0){
                mui.toast("已将签字保存至服务信息单");
                refereshBack();
            }else{
                alert(result.msg);
            }
        });
        //console.log(imgBase64);
    }.bind(this), false);
};

mui.plusReady(function() {
    _selfWebview = plus.webview.currentWebview();
    new lineCanvas({
        el: document.getElementById("canvas"),//绘制canvas的父级div
        clearEl: document.getElementById("clearCanvas"),//清除按钮
        saveEl: document.getElementById("saveCanvas"),//保存按钮
        //      linewidth:1,//线条粗细，选填
        //      color:"black",//线条颜色，选填
        //      background:"#ffffff"//线条背景，选填
    });
});

如果需要上传文件而不是base64字符串，需要将canvas.toDataUrl()改为canvas.toBlob()，返回的是blob文件路径，再上传

 

<div id="canvas">
    <p id="clearCanvas">清除</p>
    <p id="saveCanvas">保存</p>
</div>

<style>


    html,body{
        width: 100%;
        height: 100%;
    }
    #canvas{
        width: 100%;
        height: 100%;
        position: relative;
    }
    #canvas canvas{
        display: block;
    }
    #clearCanvas{
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        border: 1px solid #DEDEDE;
        z-index: 1;
    }
    #saveCanvas{
        width: 50%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: absolute;
        bottom: 0;
        right: 0;
        border: 1px solid #DEDEDE;
        z-index: 1;
    }

</style>

传到后台的是base64格式，后台接口接收字符串就可以

　　　　 /// <summary>
        /// 上传附件签名
        /// </summary>
        /// <param name="orderId">服务单id</param>
        /// <param name="file_base64">base64文件</param>
        /// <returns></returns>
        [HttpPost]
        public string UploadSignImg(string orderId,string file_base64)
        {

            try
            {
                
                //原文是data:image/png;base64,iVBORw.... 这里只保留逗号后的文件内容
                file_base64 = file_base64.Substring(file_base64.IndexOf("base64,") + 7);
                //保存文件内容到数据库
　　　　　　　　　 code

            }
            catch (Exception ex)
            {
                return AjaxResult.Error(ex.Message).ToString();
            }
        }