Handwritten signature on horizontal screen signature pad and rotated 90° to horizontal screen display base64

Handwritten signature and rotated 90° to horizontal screen display base64

base64

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApsAAAF3CAYAAADq/IAAAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3W3MPlldH/CvwLK7wEKNoiABZLvYiBqIdJGnQlor9gVBaAtJmzQsoI2wgKD4hqVNmrD7ohWhPF RSIg + + aKO0XTS8AVLb4AIVtFnaSiMPSktxoyVVWFxAFmwOzCwXF/d9/6 + 5rjkzc2Y + V/LPfwkz55z5/M593d//PJz5tvgQIECAAAECBAgQqCTwbZXa1SwBAgQIECBAgACBCJsmAQECBAgQIECAQDUBYbMarY YJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKo JCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAA ECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQ IEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQ IECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUb MarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOUCAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAE CBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABAgQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY1WwwQIECBAgAABAsKmOU CAAAECBAgQIFBNQNisRqthAgQIECBAgAABYdMcIECAAAECBAgQqCYgbFaj1TABAgQIECBAgICwaQ4QIECAAAECBAhUExA2q9FqmAABAgQIECBAQNg0BwgQIECAAAECBKoJCJvVaDVMgAABAgQIECAgbJoDBAgQIECAAAEC1QSEzWq0GiZAgAABA gQIEBA2zQECBAgQIECAAIFqAsJmNVoNEyBAgAABAgQICJvmAAECBAgQIECAQDUBYbMarYYJECBAgAABAgSETXOAAAECBAgQIECgmoCwWY0290hyXZLXJbnigm6 + mOQ1SX41ya31hqNlAgQIECBAgMD0AsLmuOafT3LvE5u8I8m1 ST5yYjt2J0CAAAECBAjMLiBsnlaCK5P8SJLHJnlckqftNVfOWr4oyduSfPmcrn44ybOS/MzOGdA7k7wyyY1Jyn/7ECBAgAABAgSaFBA2h5Xt6iSP74JlCZePTHK3vSZuT3LfYc3etXW59H5DklckX7sM/9k k35/ktiPbsxsBAgQIECBAYFYBYfNw/v + c5Ml7m381yX9L8oHuz/uTfOLwJs /d8lFJbukuyZezo492WX0E1a838cGupceM1qKGCBAgQIAAgXMFhM3DJ8dvJnlEF1b + Sxcuy99fOLyJQVs + IMnvd2dJXVYfRHfhxn/Z/b/m/nimWiJAgAABAsJmo3Pgsu6yerm07rL6OEUUNsdx1A oBAgQIEDhIwNmdg5hm32j3sno5k/pdScqT7z7DBYTN4Wb2IECAAAECRwsIm0fTTb5juaz + qe4MZznTedPkI1hHh8LmOuroKAgQIECgEQFhs5FCdcMsIbMsifSVJA/2lPpRxRM2j2KzEwECBAgQOE5A2D zOba697pPkM0ku7x5Mcjl9eCWEzeFm9iBAgAABAkcLCJtH0822o8vpp9ELm6f52ZsAAQIECAwSEDYHcS1m4/5yehlQeb3lNS6pH1wbYfNgKhsSIECAAIHTBYTN0w3naGH3cnrpvyz8Xl6d6XNpAWHz0ka2IECAAA ECowkIm6NRztJQuaTev8pSLQ8rgbB5mJOtCBAgQIDAKAICyiiMszbSh6errL15UB2EzYOYbESAAAECBMYREDbHcZyzlS9be3MQv7A5iMvGBAgQIEDgNAFh8zS/Jez98iQ3JinvTy + vt/S5WEDYXP8MeXeS + yZ57PoP1RESIEBg + QLC5vJrdKkRloeFbu82Us9LaSVfSnLPJD + Q5COX3twWDQqUV7pekeR + ST7X4PgNmQABAqsSEE7WUU5n6w6v479J8g + SPD/JGw/fzZYNCXwyyUOT/LUkH21o3IZKgACBVQoIm + soq 7B5eB1/OskvJfm3Sf7h4bvZsiGB9yV5fJInJin/7UOAAAECMwoImzPij9i1sHk45iOS /J57XA8Ha3DLX0/ytCTPTPLvGhy/IRMgQGBVAsLmOsopbA6rY/8E/99IcsuwXW3dgMC/TvJTSV6Y5A0NjNcQCRAgsGoBYXMd5RU2h9XxVUl + NskvJvm5YbvaugGBf5bknyZ5ZZJ/0sB4DZEAAQKrF hA211FeYXNYHcu9fL + Vrz + ZXp5a9lmXwPVJXp/kTUn + 8boOzdEQIECgPQFhs72anTViYXN4HZkNN2tlj7 + f5O1JfiPJT7QyaOMkQIDAWgWEzXVUVnAaXkdmw81a2aPci/veJO9P8oRWBm2cBAgQ WKuAsLmOygpOw + vIbLhZK3t8X5LfT/K/knxvK4M2TgIECKxVQNhcR2UFp + F1/GKSy5N4In243dL3KK + q/GySrya5 + 9IHa3wECBBYu4CwuY4KC5vD6 + iJ9OFmLe3hZ6KlahkrAQKrFhA 211Fev1iH19ET6cPNWtrDz0RL1TJWAgRWLSBsrqO8frEeV0dux7m1sJfatlAlYyRAYBMCwmb7Zb5Pktu7w1DPYfUUSIZ5tbR1X9urkny + pYEbKwECBNYmIJy0X9GXJ7nRu76PKuSd3QMkD0/y8aNas NNSBfpXkt6Q5KalDtK4CBAgsAUBYbP9KveByS /V4bX8j0n + VpJndYuAD2/BHksV8I + wpVbGuAgQ2JyAsNl2yZ + T5M1JyjI + 93e5cHAx/0WSlyX5hSQ/P3hvOyxZwO0lS66OsREgsCkBYbPdcpf1A8u9mlcmeW6St7R7KLON/JlJfi3Jby b50dlGoeNaAu7JrSWrXQIECAwQEDYHYC1s0x9L8u4kX0lyj4WNrZXhXJPkY53hZUn6cNLK + I3zYgFh0wwhQIDAAgSEzQUU4cgh/HJ3RrP8/ZNHtmG35C + SlKD5qCQfBrIqAWFzVeV0MAQItCog bLZZuXIJvdynWc5o/nh3hrPNI5l/1DcneXqSlyZ5zfzDMYIRBYTNETE1RYAAgWMFhM1j5ebdb/cSenm/d7mU7nOcwEuSvDrJO5I847gm7LVQAWFzoYUxrE0LPCLJk7o/fy/JPZN8KMljNq2y8o MXNtsssEvo49XtkUlu7dYpvUJwHw92AS0JmwsogiFsXqBcgbsuyeuSlO/Ysz7C5sqnibDZXoG/K8mnXUIfrXDlZ6Dct1m + EJ + S5D2jtayhuQWEzbkroP8tCzyxu1r0/G7VlN6ifN/ + + yTv7f58ZMtIWzl2YbOtSpeg + c4k1yb58yT3cyZulAK + NcmzuzVLnzdKixpZgkAfNss/JNxqsoSKGMOaBPoweX2ScjvXRZ/yRq8XJHlbkvLfPhsTEDbbKvgd3b8QyyWHpyb5k7aGv9jRljOa 7 + oupZf7hyyBtNhSDRpY/3YtZ6wHsdmYwLcIHHIpfH + nLyV5Q5LyEOYtTLctIGy2U// + bUFfSPK9guaohStP95cvxvK3JZBGpZ21sYvOWJeXITy8 + 1kqP0 + 7f35oZ + 3aElj/U5Lf7f7 8TpJPznpUOicwncB5l8LLCITJ6erQfE/CZjslLCGz3FztbUF1amYJpDquc7a6e8a6rKXaf8p9uX97xIG5B21ETE1NLnDW0 + FnDcKl8MlLs54Ohc02arn7DvRyRsZnfAFLII1vOneL5Ux1OTNZ Prv3bZbF + x/SnaEsZyn3/3w0SfnHXfk8LMlfT/Lo7u8nH/DGrtLna10 + nLv8 + t8T + J4kP5jkB5KUgFn + / pEkd7tAytlL02gUAWFzFMaqjXgHelXeuxrfXQJp9yzYNL3rpZbAFPdt7p4ZeuY5YdTZz1oV1u6 + wIO6MPn93d9lfj7ugn8klYfnfs3T4SZSTQFhs6buOG17B/o4jpdqpfwsfLXbyM/Fpb Ta + f/nWGlgyFO6c0k6YzWX/Lj9lnuN + zPv5ez7j15wprI8 + PjbScpSQ7 + 38 + f/jDskrRH4VgG/VJc/KyzgPl2NrMs4nfVUPZ133 + ZU/ff9HHpf3NTj2u9PCJ27Ahf3f9/uFcVlXv + jc 5YcKmfzP9CFyhIs/2f332V9Zh8CswgIm7OwH9ypBdwPphplwz5sXpXk86O0qJG5BXbv2/R9941qHHL2tQTPcs/qbXMXceP9/3D3wokSMP/mnkW5GlNWSyirJJQVE8rff7hxL4e/QAFfv gssSjckC7hPX5vytGV5kOSGJDdN370eKwk4Y3047CEh9KzWvG7w6ypTnMEu4fLd3Z//enhpbUlgPgFhcz77i3ouQfMPktw7iQXcp6vRy5PcmORPu6eVnd2czr5mT8LmcN0HJPlEknsduOuW w2Yf0F98wEoFB3J + 02bl4bJf6cJlefnE545pxD4E5hQQNufUP7vv3aBZXkl5tQXcJyvSfbplcL7D2c3JzKfoSNg8Trn//eCNWt/w + + 7uRMB5IbzcL/l2T3YfN + HstV4BYXNZtd2/dC5oTl + f/uxm + aXx 7e7dnL4AFXoUNiugbrDJEjTf350A2D18D1VtcDI45GECwuYwr5pbu3ReU/fwtsvZzc92y4e4d/NwtyVvKWwuuTptjG03aH48yZM8ONVG4YxyGQLC5jLq4NL5MurQj2L37GZ5RWhZ9NinXQF hs93aLWHku0Gz3Etf7tH0hP4SKmMMzQgIm/OXStCcvwb7I9g9u1mWGynv0vZpV0DYbLd2c4/8gUlu6S6dl6D5 + CR/PPeg9E + gNQFhc96KCZrz + l/U + xxvnlmuRtsjEzbbrt9coy9nNN + X5 K92DwUJmnNVQr/NCwib85awLK1Tljcqn9cmeUuSW + cdkt47gd03z1y + 8ypLQO0JCJvt1WwJIy7LOZVXQTqjuYRqGEPTAsLmvOXbDZv9SMpyRy9J8rYkZZFxn3kEyptn /l + S8nq4n0vyi/MMQ68jCAibIyBusIn3JilvE/s7Lp1vsPoOeVQBYXNUzqMbK68je1aSsijwlWe08sUkr0nyq858Hm18zI7XJPkf3Y4/mKQ8herTnoCw2V7NljBi64wuoQrGsAoBYXNZZSyvS rwuyeuSlKegD/l8oQupzoQeojV8m59P8s + 79Tb/iifThwMuYA9hcwFFMAQCBLYrIGy2Ufv + zOfPDAih5ci8gej0 + t4tSTmzfFkST6af7jlHC8LmHOr6nFLgN5KUV4w + we1XU7Lr61ABYfNQqWVud8iZ UIHz9Np5Mv10wzlbEDbn1Nf3FALl/vLyxrO/m + TmKTrUB4EhAsLmEK22tt1dVqkfuUvux9Vw98n0By3wXfVn1Xrokd6RpNyjusbFqoXNobPB9q0JlFuvXpiknOH8idYGb7zrFxA2113j80JIu Sx81oNI69Y4/ujKk + nlFZZlmaqyHMpTFxA4DzmrPfSIyzuen98twTV03yVvL2wuuTrGNobAo5P8TpI7k5SF6D8zRqPaIDCWgLA5luTy2 + nDyZu6oTrLOaxmJbi/M8m13cNC5Qu9LF01x6eMpTwZX5Z l6T + n3C5R7vX6w537gcs/Rl6wotApbM4xS/U5tcB/T1JWzXhZkldN3bn + CFwkIGxub37sr + 1ZgsX9ZwxOLVWghLxPJynB/YYkN008 / BoHv7H5Oy/d7efPR767hoBzDOgSEzXXU8dijmCM4HTvWpex3n + 5 + qPIKyynu39wPmiVkljHU/pRL659Icq + uo3JWdc5bB045XmHzFD37tiTw60meluT1ScpVDx8CixAQNhdRhtkGsRucyiCmCjKz HfBIHU91/ + buZfOaZzLPYynhstwb2gfOVs + AC5sjTXzNLF7gGUn + Q3flpawN7ENgEQLC5iLKMOsg9s + cffcCnrSeFeTAzmvdvzn1JfNLHW75jihnwF/Z/QIra/nN9WDUpcZ63v8vbB4rZ7/WBErA/Itu0H6 /t1a9FY/XZFxxcQceWn8WbY4zaAOHupjNa9yGsP8Q0BLONpcz4H/W8P29wuZifmQMZAIB830CZF0MExA2h3mteevdM2pLCDgtWI99/ + Zu0FzaGeY + WH8lyYMbe2DIL98WfpqMcSwB830sSe2MJiBsjka5ioZK4Pxjl2AG1XL3/s1TQvr + /ZlTPAQ05EB3g3VrLwXwy3dIpW3bukA/38tT6eUfhz4EZhcQNmcvweIG0H9RLe3M2uKgdgY0Rkj v3U8JrLWNyhPq/ZqbLX13CJu1Z4b2lyRQ3iJUlrQrr9l9z5IGZizbFWjpF8Z2qzTtke/eu7m0s2vTSgzr7dSQ3kogamWcu9VrcczDZp + tCXxD4K1Jnp3kzUmeB4bAEgSEzSVUYVljGOMs3bKOa JrR9CH9mLU3WzJvMbi1OOZpZq1e1ihQzmi + q1s94p5J + vm/xmN1TI0ICJuNFGriYfrlPBx8/97N + w24X6qls8ktzo0Wxzx8BtqDwNcFyiX0L3V/PyrJh8EQmFtA2Jy7Asvs3y/n4 + pSAucfH XG / 1Km Yzqf45bzYgz9xYLv3Sx36tp2WvFsa6xRhs4TMf5XkihPnzdDdBc + hYtva/pFJbnXf5raKvuSjFTaXXJ35xtZioJhP65t7LvdLlXUoyxp3h75LvCXvlsZaM2zuv + mp1PwFlc86XnT29I4 k1zS22P5SfmbXOI7yu728trJ8D7lvc40VbuyYhM3GCjbRcFsMFBPRHNTN0NdYtuTd0lhrhc0S + sqyMuUz1xnGi4LnktdqPegHaOUbfTDJtSs/xjkPz/yfU/ + cvoXNBRZlAUNqMVAsgO2uIQx9jWVL3i2NdcywWRa0/0SSe + 1MtBI0d//3XHPwrLF9j7Occ5Xjkv0Km5ckOmkDYfMkvjo7C5t1XFtvtcVAsTTzIa + xbMm7pbGOETbPC5lLe1Cn/y6/Pcm9u1s5r hY4l/a1MOl4du/bLPcUe3XlpPw62xUQNs2HswRaDBRLrOTuYu0Xvf6zJe + Wxnpq2NwPmi3cF7k75o8lebLAucSvhknGtHvfpldXTkKuk/MEhE1zQ9isOwcOebNQSwGupbEeGzb3Q2ZZILs/S9 jC21gemOS93QND5cGlK + tOca0vWOCYpdgWfDiG1qqAsNlq5eqOu8VAUVfk + Nb3L6eX0PIne8215N3SWIeGzbMumZezmQ/vFus/fhZMv2cJnOUFA + Xje356/6X0uLsU22VLGZRxbE/Al9D2an7IE bcYKA45rrm2KYHzD7p76crN6/uBsyXvlsY6JGyWh7r + 7856mX3IvK3hd0v3tfKw0Fw/ + fP3W5Ziu9M/OuYvxNZHIGxufQacffwtBoqlV3I3cH4oyVN3znC25N3SWIeEzd3lqh7a3efYwi Xzi + Z9fwtHeWq + zL/yv322J9Diz + z2qrTyIxY2V17gIw/Pl9ORcJfY7bwn1Fvybmmsh4TN/cXZX5Hkxjrln7zVclvApwa + YGDyQeqwukCLP7PVUXQwrYCwOa13K735cqpXqd0n1H8qyduSvK/r7jH1uh2t 5RbnxlljPu/ + zLJqwJrOAJa3WL2yu5Tqnr3Rfgyaaqif/1etbG43VYStD1bY3PoMOPv4WwwULVXyc0nKF3/5lFfKlTUbS + j8cgMH0eLc2B/zftBc8yLQ5V7UsvZm + fi + b + AHrMIQy/fKkNf nVhiCJrcu4Mtn6zPgW4/fL6f6c6J88V + kzZIv47YYXM560KdfO7NfHqhupedt3VPp8/rP3Xs5gfDJJN + RpNxWcdPcA9L/9gSEze3V/ FJH7JLLpYTG///LfZyfbuRSV4thc/8hoFbXzjx25vXHX86ee4XlsYpt77d7EuGeDS/n1XYVNjx6YXPDxT/n0N1MPs + c6H8ZlPcX//SC7 + FsMWzuVrT/zmt9WaMhs3T31gFvFBoit55ty9nN zya5W5JHJfnweg7NkbQgIGy2UKVpx9h6mJhWa7ze9hcVX + I9nCW0lEXOy8d3x3i1n6IlbxSaQnnZfdyc5OlJXprkNcseqtGtTcAvjLVV9PTjETZPNzy2hf17OMti3C9e0FnO3cux3rd9bJXn28/P 9nz2S + j5JUleneQdSZ6xhAEZw3YEhM3t1PqQI91dA9LcOESszjalDh/fWR6p9HLWay7r9H52q7tnNb3 + cEr58foSNsezbLGlRya5tVtz9Yok5ZYdHwKTCAgUkzA30cn + + 7vLZV2f + QT2z3 L2I5njbOfuJX73/M03J07tWdg8VbDt/cvv + 7Kub/lueUqS97R9OEbfkoCw2VK16o61v0Q69xm0ukfZZuu7/xDYP4Ip6rX7JGtZp6 + /b7NNze2OWtjcbu37I39rkmcneXOS5 + EgMJWAs DmV9LL72b18Xl7Xt /SFxZetWW90U5/t3H/TzpreG16vSsttWdhcbm2mGlk5o/kury + dils/vYCwaS6UoPnOJNd29wW6fN7OnDjr3s4y + jEutZ + 1NuXa3hveTqXHGamwOY5jy63cvQua5Rj8/m + 5ko2N3WRrrGAjD 3f38uyHkjzVWc2Rhes3d97ZzrF6LgugX + PS + Vics7YjbM7Kv5jOzYPFlGI7AxE2t1Pr3SPdDyhT3Pe3Tenpj3rM8FnmxVXeNjJ9ESv1KGRUgm2sWfOgsYKtYbjC5hqqePgx9EHkXya 5V7fbEhcPP/yIbEmAwCEC5faY27sNfe8fIrbebfqwWX4fWP5ovXVe1JH50llUOaoOZv/ + vrIExvULWjC86sFrnMDGBXZXFLhs4xZbP/w7k5R7Ny1/tPWZMOHxC5sTYs/Y1e5DQOVM5ouEzBmro WsC0wqUs5p/1gWMG5LcNG33eluYgOWPFlaQLQxH2Fx/lT0EtP4aO0ICFwnsntX89iRlpQGf7QpY/mi7tZ/tyIXN2egn6fgRST6Y5N4LeN3hJAesEwIEvknAWU0TYl/A8kfmxOQCwubk5JN0WG78 LpfLyiLc5b8/m + T7LGs0ib1OCCxJwFnNJVVjOWPpHxI6dESWQDtUynZnCgib65sY5bL5R5Pcr1u898Yk5c + X13eojogagusilj/7/H + F7TU0XXQBOWGZ7PEXJE + 25Q5JDIYASHMMMMMMM2JL32V9FSFXL9ALJBL3MCI2kaihkas/P3OFDUINRPXQ80pwuzvlb2t7qxo1jFPK EIL2MowuasqnhcwkyDezyDezybvqiswad8y/PK7GDL60V7DXXXFMYO7XCBIWGZTPRA7SXMUF +/FITOW61T6D2OQ5GDU + + W9GWWIPI6CAINC/RH4RLJYAXPYM8DQS FMov6zpel2S8LKQ/H8YZSM9 + ZTRVRBPMF7XOLM5VUMULFAXYB6U5ixWZPYSXL8EFIVGBUGLLC1ibnzm2owh319NE6O1WXDTZ8uprnhgd/W/76J66jjcncfaizt OANYEAAT4WVEN1XW2EEJZ7IX6E9F + 73K7XYIC91JVRXJOAYXMSYWNAOEV + ZHLPVAROHWIECFHX0XRGCMSFNM2MFO + P3JDQ5DKRCXBYTND1MPICCWLYF3 NUETB6NEMSLL7XP2JKNFU3M9Z3SH + 9ITV7F58PC0IOX1TQNGCU7NEW7UVNPRU83Rowibqsoczmi1XB9QXJX02 + 9H3OFOXUVVDD4 + QHM8SRM9ocSu0h6uqwez3uqwez BKRCON + S9B8Z5JRVXly0li2ilbhawc1z8GyDEK2ZUDQO8LVLJ3Z9NNHE + Y7BL4DY3CKADQ9OQ2EXZZD3QFSVJZSGMIMACBJZXEARGHRCFGFZN + OJSZ6R5PPZNJMOB7SKWVTNAAAAAMB0LEQVR6GQEMGPPFA4YQBA7AQRZP/huadrv78yrxc5qvkokokvzbu3MGCYFOS4 + + wDaAmZV + xt4On2OWZGpT6FzUqwBzR7Ubgs92U + VLg8QNEmBAiU9XbfZM1DE2GAwFLCZj/ki34fDjisxW9arlA + ZvGjrDBAYbMC6gFNlntZPpDkvnvbevjnADybECBwl8Duaym9zcXEOFRgaWFzf9xrD Z/C5qEz1HYnCZQfoBuSvKK7WbpcHn + Je1ROMrUzgS0LeC3llqt//LEvPWwef2T2XKSAM5vjl + WQf5GVJSBu7P6Um6J9CBAgMFTgAUlu63byXT5Ub9vbC5vbrv/kR + 8L6nTy854eP6/lctnrCUlu Pb1rLRAgsFGBEjQ/keReScrl8ys36uCwjxMQNo9zs9eRAsLmkXDdbh/s1r/cb8W9l6e52psAgYsFPp/k3t06hQ/bOcPJjcAhAsLmIUq2GU1A2DyNsg + bliY6zdHeBAgcLlDW1Ly92/xBSf7o8 F1tSeBrAsKmiTCpgLA5KbfOCBAgcLLA7pqal53cmga2KCBsbrHqMx6zsDkjvq4JECAwUKDcq/mpbjWLsrLFTQP3tzkBZzbNgckFhM3JyXVIgACBowR2Hwoq75T + ziTl3k0fAkMFnNkcKmb7kwSEzZP47 EyAAIGvCew + LFiC4BuS3JzklpF89oOmh4JGgt1oM8LmRgs/12ELm3PJ65cAgTUJnLcyxdjHWILs1R4KGpt1c + 0Jm5sr + bwHLGzO6693AgTWJ /DEJM9Icn2Sy0c8vLJG78MFzRFFt9uUsLnd2s9y5MLmLOw6JUCAwCCB/ru6DwmDdrYxgT0BYdOUmFRA2JyUW2cECBAgQGB2AWFz9hJsawDC5rbq7WgJECBAgICwaQ5MKiBsTsqtMwIECBAgMLuAsDl7 CbY1AGFzW/V2tAQIECBAQNg0ByYVEDYn5dYZAQIECBCYVeDBSf53kq90b6KadTA634aAsLmNOjtKAgQIECBQBJ6S5F1JfjvJY5EQmEJA2JxCWR8ECBAgQGAZAj + b5FVJ3pzkecsYklGsXUDYXHuFHR8 BAgQIEPiGwC8neW6Sl3Whkw2B6gLCZnViHRAgQIAAgcUIvD/J45L8eJJ3L2ZUBrJqAWFz1eV1cAQIECBA4C6Buyf5UpLy90OSfIoNgSkEhM0plPVBgAABAgTmF/ix7mzml5Pcc/7hGMFWBITNrVTacRIgQID A1gX6 + zXL3z + 5dQzHP52AsDmdtZ4IECBAgMBcAuXS + Re7tTXdrzlXFTbar7C50cI7bAIECBDYlEB/Cb0s5n55t6j7pgAc7HwCwuZ89nomQIAAAQJTCbiEPpW0fr5FQNg0KQgQIECAwPoFykNB97Dk0foLvc QjFDaXWBVjIkCAAAEC4wr8ZddcCZzlUroPgckEhM3JqHVEgAABAgRmE + jDpt/7s5Vgux2bdNutvSMnQIAAge0ICJvbqfXijlTYXFxJDIgAAQIECIwuIGyOTqrBQwWEzUOlbEeAAAECBNoVEDbbrV3zIxc2my + hAyBAg AABAhcK3CfJ7d0Wfu + bLJMLmHSTk + uQAAECBAhMKvDyJDcmuTPJZZP2rDMCSYRN04AAAQIECKxboF9j84YkN637UB3dEgWEzSVWxZgIECBAgMB4Av39mlcl + fx4zWqJwGECwuZhTrYiQIAAAQItCrhfs8WqrWz MwubKCupwCBAgQIDAjoD7NU2H2QWEzdlLYAAECBAgQKCagPs1q9Fq + FABYfNQKdsRIECAAIG2BHYvobtfs63arWq0wuaqyulgCBAgQIDAXQIuoZsMixAQNhdRBoMgQIAAAQKjC7iEPjqpBo8REDaPUbMPAQIECBBYvoAlj 5Zfo02MUNjcRJkdJAECBAhsUMD70DdY9CUesrC5xKoYEwECBAgQOF1A2DzdUAsjCAibIyBqggABAgQILFBA2FxgUbY4JGFzi1V3zAQIECCwBQFhcwtVbuAYhc0GimSIBAgQIEBgoMADktzW7eN3/UA8m48rYAKO6 6k1AgQIECAwt8AHk1zbDeKLSa6ce0D637aAsLnt + jt6AgQIEFifQB8270hyzc4ZzvUdqSNqQkDYbKJMBkmAAAECBAYJ9L/f + /s2B + /4o7J8OA4q2WAAAAAElFTkSuQmCC

vue

<!--
 * @Author: zhouyx
 * @Date: 2023-11-01 13:40:42
 * @LastEditTime: 2023-11-01 14:29:08
 * @LastEditors: zhouyx
 * @FilePath: \Wenzhou h5\src\views\cardApplication\canvasSign.vue
 * @programmer: Buddha bless, never downtime, never BUG
-->
<template>
  <div class="signature">
    <canvas ref="canvas" class="canvas" placeholder="Please sign"></canvas>
    <div class="btn-group flex flex-wrap flex-acenter">
      <button class="clear" @click="clear">Rewrite</button>
      <button class="save" @click="save">Confirm</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.canvas
      this.ctx = this.canvas.getContext('2d')
      this.canvas.width = window.innerWidth
      this.canvas.height = window.innerHeight
      this.ctx.strokeStyle = '#000000'
      this.ctx.lineWidth = this.lineWidth
      this.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 = true
        this.lastX = e.touches[0].clientX
        this.lastY = e.touches[0].clientY
      },
      draw(e) {
        if (!this.drawing) return
        const x = e.touches[0].clientX
        const y = e.touches[0].clientY
        this.ctx.beginPath()
        this.ctx.moveTo(this.lastX, this.lastY)
        this.ctx.lineTo(x, y)
        this.ctx.stroke()
        this.lastX = x
        this.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.height
          canvas.height = img.width
          ctx.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>