<!DOCTYPE html> <html lang="zh-CN"> <head> <title>test</title> <meta charset="utf-8" /> <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="expires" content="0"> <meta name="viewport" content="width=device-width, user-scalable=no" /> <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script> <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script> <style> .signature, #sign, .signature button { box-sizing: border-box; } #sign { position: relative; } .signBtn { flex-shrink: 0; height: 70px; display: flex; align-items: center; justify-content: space-around; } #sign canvas { width: 100%; height: 100%; } .copyCanvas { display: none; } .address { margin: 1rem; padding-bottom: 1rem; margin-bottom: 0rem; display: flex; align-items: center; justify-content: space-between; } .qianming img { width: 1rem; float: right; margin-top: 4px; } .qianming button { width: 1rem; float: right; display: flex; justify-content: flex-end; } .qianming { align-items: flex-start; } .signature { background-color: #fff; /* width: calc(100% - 2rem); height: calc(100% - 2rem); margin: 1rem; */ height: 100%; width: calc(100vw - 2rem); display: flex; flex-direction: column; justify-content: space-between; } .signature>div:first-child { height: calc(100% - 70px - (0.6*16*2px)); border: 1px dashed #c1c1c1; margin: 0.6rem; } .signature button { color: #404040; font-size: 1.2rem; width: initial; transform: rotate(90deg); text-align: center; width: 100%; height: 100%; border: none; outline: none; background-color: transparent; padding: 0; } .mask { position: absolute; width: 100%; height: 100%; z-index: 1; display: flex; text-align: right; } canvas { position: relative; z-index: 2; } .mask div { flex: 1; position: relative; } .mask div span { transform: rotate(90deg); display: inline-block; color: #c1c1c1; position: relative; right: 0; top: 40px; font-weight: 500; } .qianmings { border-right: 1px dashed #c1c1c1; } .btns button { padding: 0.7rem; background-color: #5c92ff; border-radius: 1.5rem; font-size: 1.1rem; box-shadow: 0px 2px 5px rgb(0 0 0 / 20%); color: #fff; width: 100%; box-sizing: border-box; margin-top: 15px; } .btns { margin: 1rem; } .signBox { width: calc(100vw - 2rem); height: calc(100vh - 2rem); overflow: hidden; } #copyCanvas { display: none; } </style> </head> <body> <div id="app" v-cloak> <!-- 旋转前 --> <img src="" id="mysignature"> <!-- 旋转后 --> <img :src="signature" id="mysignatureCopy"> <van-popup v-model="showUserSign" class="buyShow"> <user-sign :show-user-sign="showUserSign" @changepopup="changePopup" @signature="getSignature"></user-sign> </van-popup> </div> </body> <script> /** * 用户签名组件 */ /* 注册全局组件 */ Vue.component('user-sign', { template: ` <div class="signBox"> <canvas ref="copyCanvas" id="copyCanvas"></canvas> <div class="signature"> <div id="sign" ref="fRoot"> <div class="mask"> <div class="qianmings"> <span>本人签名</span> </div> <div class="qmtime"> <span>签名时间</span> </div> </div> </div> <div class="signBtn"> <button @click="closeUserSign">关闭</button> <button @click="clearCanvas">清除</button> <button @click="saveCanvas">保存</button> </div> </div> </div> `, props: ['showUserSign'], data () { return { linewidth: 4, color: '#404040', background: 'transparent', drawStatus: false, cxt: '', cxtCopy: '', copy: '', canvasStyle: { width: '', height: '' } }; }, mounted () { this.initCanvas() }, methods: { closeUserSign () { this.$emit('changepopup', false) }, initCanvas () { let canvas = document.createElement("canvas") this.canvas = canvas this.$refs.fRoot.appendChild(canvas) let cxt = canvas.getContext("2d") this.cxt = cxt let width = this.$refs.fRoot.clientWidth let height = this.$refs.fRoot.clientHeight cxt.fillStyle = this.background; canvas.width = width; canvas.height = height; this.canvasStyle.width = width; this.canvasStyle.height = height; // cxt.fillRect(0, 0, width, height); cxt.strokeStyle = this.color; cxt.lineWidth = this.linewidth; cxt.lineCap = "round"; this.cxtCopy = this.$refs.copyCanvas.getContext("2d"); this.copy = this.$refs.copyCanvas const offset = 24; //开始绘制 canvas.addEventListener( "touchstart", function (e) { this.drawStatus = true cxt.beginPath(); cxt.moveTo( e.changedTouches[0].pageX - offset, e.changedTouches[0].pageY - offset ); }.bind(this), false ); //绘制中 canvas.addEventListener( "touchmove", function (e) { cxt.lineTo( e.changedTouches[0].pageX - offset, e.changedTouches[0].pageY - offset ); cxt.stroke(); }.bind(this), false ); //结束绘制 canvas.addEventListener( "touchend", function () { cxt.closePath(); }.bind(this), false ); }, clearCanvas () { // 清除画布 this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawStatus = false }, saveCanvas () { // 保存图片，直接转base64 let imgBase64Copy = '' let signature = '' const imgBase64 = this.canvas.toDataURL(); const img = document.querySelector("#mysignature"); img.src = imgBase64; img.onload = () => { // 图片宽高 let iw = img.width let ih = img.height // canvas宽高 let cw = 145 let ch = 86 const opt = this.getXY(cw, ch, ih, iw) this.cxtCopy.clearRect(0, 0, opt.rw, opt.rh) this.cxtCopy.translate(0, opt.rh + opt.points[1]) this.cxtCopy.rotate(-Math.PI / 2) this.cxtCopy.drawImage(img, opt.points[1], opt.points[0], opt.rh, opt.rw) // 将有效部分图片截取 let frame = this.cxtCopy.getImageData(0, 0, opt.rw, opt.rh) // 将canvas保持与图片大小相同 this.copy.height = opt.rh this.copy.width = opt.rw // 清除画布 this.cxtCopy.clearRect(0, 0, opt.rw, opt.rh) // 重新绘制 this.cxtCopy.putImageData(frame, 0, 0) imgBase64Copy = this.copy.toDataURL(); if (this.drawStatus) { signature = imgBase64Copy; } else { signature = '' } this.drawStatus = false this.clearCanvas() this.$emit('signature', signature) } }, /** * @description: * @param {*} cw canvas宽度 * @param {*} ch canvas高度 * @param {*} iw img宽度 * @param {*} ih img高度 * @return {*} */ getXY (cw, ch, iw, ih) { // 比较宽高比例,大的一边撑满 let li = iw / ih let lc = cw / ch // console.log('图片宽高比', li, 'canvas宽高比', lc); // 需要绘制的宽高起点 let points = [0, 0] let rw, rh let wall = false // 是否宽度占满 if (li > lc) { // 宽度100%,等比缩放 rw = cw rh = rw / li points[0] = 0 points[1] = (ch - rh) / 2 wall = true } else { rh = ch rw = rh * li points[0] = (cw - rw) / 2 points[1] = 0 wall = false } rw = Math.floor(rw) rh = Math.floor(rh) // console.log('canvas', cw, ch, 'img', iw, ih, '绘制', rw, rh); return { points, rw, rh } } } }); </script> <!-- <script src="js/signature.js" defer="defer"></script> --> <script> new Vue({ el: '#app', data () { return { showUserSign: true, signature: '' } }, methods: { getSignature (val) { this.signature = val this.showUserSign = false }, goSign () { this.showUserSign = true }, changePopup (val) { this.showUserSign = val } } }) </script> </html>
canvas实现图片旋转并保存 引用https://blog.csdn.net/qq_43585229/article/details/120045282
