本文主要是介绍横屏签字板手写签名并旋转90°转为横屏显示base64，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
手写签名并旋转90°转为横屏显示base64
base64
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApsAAAF3CAYAAADq/IAAAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3MPlldH/CvwLK7wEKNoiABZLvYiBqIdJGnQlor9gVBaAtJmzQsoI2wgKD4hqVNmrD7ohWhPFRSIg++aKO0XTS8AVLb4AIVtFnaSiMPSktxoyVVWFxAFmwOzCwXF/d9/6+5rjkzc2Y+V/LPfwkz55z5/M593d//PJz5tvgQIECAAAECBAgQqCTwbZXa1SwBAgQIECBAgACBCJsmAQECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY0290hyXZLXJbnigm6+mOQ1SX41ya31hqNlAgQIECBAgMD0AsLmuOafT3LvE5u8I8m1ST5yYjt2J0CAAAECBAjMLiBsnlaCK5P8SJLHJnlckqftNVfOWr4oyduSfPmcrn44ybOS/MzOGdA7k7wyyY1Jyn/7ECBAgAABAgSaFBA2h5Xt6iSP74JlCZePTHK3vSZuT3LfYc3etXW59H5DklckX7sM/9kk35/ktiPbsxsBAgQIECBAYFYBYfNw/v+c5Ml7m381yX9L8oHuz/uTfOLwJs/d8lFJbukuyZezo492WX0E1a838cGupceM1qKGCBAgQIAAgXMFhM3DJ8dvJnlEF1b+Sxcuy99fOLyJQVs+IMnvd2dJXVYfRHfhxn/Z/b/m/nimWiJAgAABAsJmo3Pgsu6yerm07rL6OEUUNsdx1AoBAgQIEDhIwNmdg5hm32j3sno5k/pdScqT7z7DBYTN4Wb2IECAAAECRwsIm0fTTb5juaz+qe4MZznTedPkI1hHh8Lm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
vue
<!--* @Author: zhouyx* @Date: 2023-11-01 13:40:42* @LastEditTime: 2023-11-01 14:29:08* @LastEditors: zhouyx* @FilePath: \温州h5\src\views\cardApplication\canvasSign.vue* @程序猿: 佛祖保佑 永不宕机 永无BUG
-->
<template><div class="signature"><canvas ref="canvas" class="canvas" placeholder="请签名"></canvas><div class="btn-group flex flex-wrap flex-acenter"><button class="clear" @click="clear">重写</button><button class="save" @click="save">确认</button></div></div>
</template><script>export default {data() {return {canvas: null,ctx: null,drawing: false,lastX: null,lastY: null,lineWidth: 2,}},mounted() {this.canvas = this.$refs.canvasthis.ctx = this.canvas.getContext('2d')this.canvas.width = window.innerWidththis.canvas.height = window.innerHeightthis.ctx.strokeStyle = '#000000'this.ctx.lineWidth = this.lineWidththis.ctx.lineJoin = 'round'this.ctx.lineCap = 'round'this.canvas.addEventListener('touchstart', this.startDrawing)this.canvas.addEventListener('touchmove', this.draw)this.canvas.addEventListener('touchend', this.stopDrawing)},methods: {startDrawing(e) {this.drawing = truethis.lastX = e.touches[0].clientXthis.lastY = e.touches[0].clientY},draw(e) {if (!this.drawing) returnconst x = e.touches[0].clientXconst y = e.touches[0].clientYthis.ctx.beginPath()this.ctx.moveTo(this.lastX, this.lastY)this.ctx.lineTo(x, y)this.ctx.stroke()this.lastX = xthis.lastY = y},stopDrawing() {this.drawing = false},save() {const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')const img = new Image()img.src = this.canvas.toDataURL()img.onload = () => {canvas.width = img.heightcanvas.height = img.widthctx.translate(canvas.width / 2, canvas.height / 2)ctx.rotate((-90 * Math.PI) / 180)ctx.drawImage(img, -img.width / 2, -img.height / 2)const dataURL = canvas.toDataURL()console.log(dataURL)}},clear() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)},},}
</script><style scoped lang="scss">.signature {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ffffff;}.canvas {width: 100%;height: 100%;}.btns {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);}.btn-group {position: absolute;top: 0;left: 0;width: 1.6rem;height: 100%;z-index: 9;transform: translate(-10%, 25%);button {width: 160px;height: 72px;background: rgba(255, 255, 255, 1);border-radius: 6px;font-size: 28px;color: #333;transform: rotate(90deg);}button.clear {margin-top: 2rem;border: 1px solid rgba(50, 190, 218, 1);color: #32beda;}button.save {margin-top: 2rem;background: rgba(50, 190, 218, 1);border: 1px solid rgba(50, 190, 218, 1);color: #fff;}}
</style>这篇关于横屏签字板手写签名并旋转90°转为横屏显示base64的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
