<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet" /> <link rel="stylesheet" href="js/layui/css/layui.css"> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/layui/layui.all.js"></script> <script src="js/common_xj_20171206.js"></script> <title>签名</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-direction: column; -webkit-flex-direction: column; } header { width: 100%; height: 0.88rem; line-height: 0.88rem; padding: 0 .24rem; box-sizing: border-box; text-align: center; font-size: 0.34rem; background: #fff; } #footers { width: 100%; height: 1rem; background: #fff; text-align: center; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-around; } button { width: 60px; height: 30px; border-radius: 0.34rem; font-size: 0.28rem; color: #fff; outline: none; border: 0; } .but1 { background: #999999; } .but2 { background: #ff3737; } #container { flex: 1; background: #f5f5f5; padding: 0.24rem; font-size: 0; } canvas { box-sizing: border-box; background: #fff; } </style> </head> <!-- 自适应js --> <script type="text/javascript" charset="utf-8"> "use strict"; (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = (clientWidth / 7.5) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> <body> <div id="container"> <canvas id="canvas"></canvas> </div> <div id="footers"> <button class="but1">重置</button> <button class="but2" onclick="submit()">确定</button> </div> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); //设置确定按钮不可用 $('.but2').attr('disabled', true); var winWidth = document.documentElement.clientWidth; var winHight = document.documentElement.clientHeight; var headH = $("header").innerHeight(); var footH = $("#footers").innerHeight(); //按比例计算内边距的值,当前UI设计图宽为750,可根据项目设置 var paddingW = (winWidth * 100 / 750) * 0.24 * 2; if (winWidth > winHight) {//横屏 比例用body的高来计算 paddingW = (winHight * 100 / 750) * 0.24 * 2; } canvas.width = winWidth - paddingW; canvas.height = 200; var content = canvas.getContext("2d"); //设置画笔的样式 content.strokeStyle = "#000"; content.lineWidth = 1; content.lineCap = 'round'; content.lineJoin = 'round'; content.shadowBlur = 1; content.shadowColor = '#000'; content.beginPath(); canvas.addEventListener("touchstart", function (e) { content.beginPath(); var touch = e.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.moveTo(x, y); }); canvas.addEventListener("touchmove", function (event) { event.preventDefault(); var touch = event.targetTouches[0]; var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; content.lineTo(x, y); content.stroke(); }); canvas.addEventListener("touchend", function (event) { content.closePath(); //当画布有内容时,确定按钮才可用 $('.but2').attr('disabled', false); }); document.querySelector(".but1").onclick = function () { content.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight); $('.but2').attr('disabled', true); } // 确定提交签名照片 function submit() { var imgBase64 = canvas.toDataURL(); var imgPng = canvas.toDataURL('image/png'); var image = dataURLtoBlob (imgBase64); var formData = new FormData(); formData.append("file", image, Date.now() + '.jpg'); $.ajax({ url: '/openapi/common/upload', type: 'POST', data: formData, // 上传formdata封装的数据包 dataType: 'JSON', cache: false, // 不缓存 processData: false, // jQuery不要去处理发送的数据 contentType: false, // jQuery不要去设置Content-Type请求头 success: function (res) { // 成功回调 window.parent.layer.closeAll(); if (res.code == 20000) { $(".signatureContent", window.parent.document).html('<img src=https://test.zgbxjj.com' + res.data.filePath + '>'); $(".signatureContent img", window.parent.document).css({ 'height': '100%', 'vertical-align':'top' }); // 获取签名之后的pdf window.parent.signPdf(); }else{ layer.msg(res.mssage); } }, error:function(){ window.parent.layer.closeAll(); layer.msg(res.mssage); } }); } // base64转blob function dataURLtoBlob (dataurl) { /*将base64转换成可用formdata提交的文件*/ var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); } </script> </html>