银行大堂经理带上你一步步实际操作,那样隐私功能具体如何完成的

在线浏览

1. 需求分析报告

到银行办银行卡时你就会发现，有些是用电子器件办卡顿，银行大堂经理带上你一步步实际操作，其中有一个实际操作便是签定电子协议，那样隐私功能具体如何完成的？

2. 完成构思

（1）首先你得将你协议书呈现出来，并且这些协议书是一些后台管理可编辑的html富文本，接口请求到富文本后，document.getElementById('innerHTML').innerHTML 插入到指定div上；

（2）次之乃是我们自己的签名地区，一整块地区用原生态canvas完成，签定结束后生成图片，上传至图片库，取得图形的url后，拼凑一个 <img src=\"${imgUrl}\"> 标识符，用正则匹配插入到特定标识内；

function saveAgreement() {
    // 正则匹配 /span\sclass=?."insertSign. ?>. ?<?.span/g	配对 class = insertSign 标签（class能是随意富文本中出现的name）
    let labelRegex = /span\sclass=?."insertSign. ?>. ?<?.span/g;
    let labelStr = "";
    let imgUrl = "";
    let imgLabel = imgUrl ? `<img src=\"${imgUrl}\" style=\"width:100px; ${orientationScreen ? 'transform: rotate(270deg);' : ''}\">` : "已签字"; // 待替换图片 或 文字
    while ((labelStr = labelRegex.exec(currentSignStr)) !== null && labelStr[0].indexOf("<img") === -1) {
console.log("获取到标签", labelStr[0]); // 获取到标签
let indexEnd = labelStr[0].indexOf(">"); // 完毕标识
let nextEnd = labelStr[0].indexOf("<"); // 逐渐标识
let target = labelStr[0].slice(indexEnd   1, nextEnd); // 总体目标地区
        currentSignStr = currentSignStr.replace(target, imgLabel);
        labelStr = "";
    }
    alert("操作成功！");
    // 更改签字情况
    mcpSignStatus = 1;
    returnSign();
}

3. 注意事项：

（1）假如你用的都是手机端签定，那自然要动态性窃听设备显示器的宽高来升级canvas宽高比；

// 监视全屏、坚屏
window.addEventListener(evt, resize, false);
function resize(fals) {
   if (window.orientation == 0 || window.orientation == 180) {
   console.log('||坚屏||');
   orientationScreen = true; // 开启坚屏情况
   horizontalScreen = false; // 关掉全屏情况
   canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   } else {
   console.log("==全屏==");
   canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   orientationScreen = false; // 关掉坚屏情况
   horizontalScreen = true; // 开启全屏情况
   }
}
resize(true);
// 监视对话框转变，动态管理canvas宽高比
window.onresize = function () {
   canvasWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
   canvasHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   console.log(canvasWidth, canvasHeight);
   document.getElementById("canvasId").setAttribute("width", canvasWidth);
   document.getElementById("canvasId").setAttribute("height", canvasHeight);
   document.getElementById("canvasId").getContext('2d').lineWidth = 4;
};

（2）签定结束后，图片插入方位你还可以根据显示屏情况（横/坚屏）来旋转图片；

// 待替换图片，全屏产生的图片旋转270度；
let imgLabel = `<img src=\"${imgUrl}\" style=\"width:100px; ${orientationScreen ? 'transform: rotate(270deg);' : ''}\">` ; 

4.进一步了解

（1）正则匹配调节，能用 regex101 即时看到自己正则匹配状况；

（2）强烈推荐一个优秀的 signature 库，你也许会问我为什么没有直接用来，由于原生的写起来刺激性呀！