页面展示效果,点保存后生成图片链接
图片链接展示效果
这里只展示了竖屏签名效果,横屏自己粘贴代码测试
css
.box {width: 98%;display: flex;flex-direction: column;margin: auto;} .canvasbox {width: 100%;border: 1px solid #bbb;margin: 0 auto;overflow: hidden;} canvas {background: #f4f5f7;} .box2 {width: 50%;margin: 5px auto;display: flex;justify-content: space-between;} .btn {width: 70px;height: 30px;line-height: 30px;line-height: 30px;border: 1px solid #bbb;text-align: center;border-radius: 3px;margin-top: 10px;}
html
<div class="box" id="myBox"> <div class="canvasbox" id="myDiv"> <canvas id="signatureCanvas"></canvas> </div> <div class="box2"> <div class="btn" onclick="clearSignature()">清除</div> <div class="btn" onclick="saveSignature()">保存</div> </div> </div>
js
var myDiv = document.getElementById('myDiv'); var myBox = document.getElementById('myBox'); // var mySpan = document.getElementById('mySpan'); var screenHeight = 0, screenWidth = 0; const canvas = document.getElementById('signatureCanvas'); const ctx = canvas.getContext('2d'); let isDrawing = false; let lastX = 0; let lastY = 0; canvas.addEventListener('touchstart', startDrawing); canvas.addEventListener('touchmove', draw); canvas.addEventListener('touchend', stopDrawing); canvas.addEventListener('touchcancel', stopDrawing); function draw(e) { if (!isDrawing) return; e.preventDefault(); const currentX = e.touches[0].clientX - e.target.offsetLeft; const currentY = e.touches[0].clientY - e.target.offsetTop; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(currentX, currentY); ctx.stroke(); [lastX, lastY] = [currentX, currentY]; } function startDrawing(e) { drawCanvas = true isDrawing = true; [lastX, lastY] = [e.touches[0].clientX - e.target.offsetLeft, e.touches[0].clientY - e.target.offsetTop]; } function stopDrawing() { isDrawing = false; } // 清除签字 function clearSignature() { drawCanvas = false ctx.clearRect(0, 0, canvas.width, canvas.height); } function saveSignature() { if (!drawCanvas) { alert('请手写签名') return } const dataURL = canvas.toDataURL('image/png'); // 转换为 PNG 格式的图像数据 // 将 dataURL 提交给后端进行处理 console.log(dataURL) // fetch('/saveSignature', { //提交接口,随便写的(改成对应的接口) // method: 'POST', // headers: { // 'Content-Type': 'application/json' // }, // body: JSON.stringify({ signatureDataURL: dataURL }) // }).then(response => { // // 处理响应 // }).catch(error => { // // 处理错误 // }); } var tempCanvas = document.createElement('canvas'); var tempCtx = tempCanvas.getContext('2d'); function orient() { if (window.orientation == 0 || window.orientation == 180) { const tempCanvas = document.createElement('canvas'); const tempCtx = tempCanvas.getContext('2d'); // 保存当前画布内容到临时画布 tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; tempCtx.drawImage(canvas, 0, 0); screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; screenWidth = window.innerWidth || document.documentElement.innerWidth || document.body.innerWidth; myDiv.style.height = screenHeight * 0.8 + 'px'; canvas.setAttribute("height", screenHeight * 0.8); canvas.setAttribute("width", screenWidth); ctx.translate(canvas.width / 2, canvas.height / 2); // 设置中心点 ctx.rotate((90 * Math.PI) / 180); // 逆时针旋转90度 ctx.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2); // 恢复画布 ctx.rotate((-90 * Math.PI) / 180); ctx.translate(-canvas.width / 2, -canvas.height / 2); console.log('竖屏'); alert("竖屏") } else { const tempCanvas = document.createElement('canvas'); const tempCtx = tempCanvas.getContext('2d'); screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; screenWidth = window.innerWidth || document.documentElement.innerWidth || document.body.innerWidth; myDiv.style.height = screenHeight * 0.8 + 'px'; tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; tempCtx.drawImage(canvas, 0, 0); canvas.setAttribute("height", screenHeight * 0.8); canvas.setAttribute("width", screenWidth); ctx.translate(canvas.width / 2, canvas.height / 2); // 设置中心点 ctx.rotate((-90 * Math.PI) / 180); // 顺时针旋转90度 ctx.drawImage(tempCanvas, -tempCanvas.width / 2, -tempCanvas.height / 2); // 恢复画布 ctx.rotate((90 * Math.PI) / 180); // 恢复旋转角度 ctx.translate(-canvas.width / 2, -canvas.height / 2); // 恢复绘图原点 console.log('横屏'); alert("横屏") } myBox.style.height = screenHeight + 'px'; } //页面初次加载 window.onload = function () { orient(); } //页面添加转屏事件 // window.addEventListener('orientationchange', function () { // console.log(2222); // orient(); // }); //浏览器变化 window.onresize = function () { orient(); };
标签:canvas,document,ctx,height,width,tempCanvas,签名,竖屏 From: https://www.cnblogs.com/srqsl/p/17745778.html