canvas学习记录—手机横板签名旋转后上传

        新入职一家公司，遇到的一个bug，用户在手机上签名后，会将这个签名的图片上传给后台，后台拿到数据和对应的展示模板再通过freemaker生成pdf返回，此时，pdf的用户签名是竖版的，要求前端将图片旋转后再上传。
       一开始很懵逼，也没有思路，不知道怎么去旋转图片后再上传，之前的认知都是对图片旋转也都是在前端页面展示的层面上，一直在考虑怎么对图片旋转后还要记录信息上传后台，感觉这个问题后台应该可以很简单解决，毕竟可以直接拿到图片文件，再操作应该要简单点(不了解后台操作哈！！  有知道的小伙伴可以评论区解答_-_)
       百度的过程中看到了canvas，于是恶补了一天canvas的内容，找到了解决办法。。。嘿嘿嘿嘿！
      整体思路就是通过canvas，将原来的图片注入到新的canvas画布中，通过对新画布的操作实现，具体代码如下
    
 效果展示

思路和代码其实都很简单，只需要注意其中的几个关键点就ok，canvas的**translate()方法和rotate()方法**，和css中的transform中的属性一样，首先两者都是对画布本体进行操作的。rotate方法旋转画布后，画布的原始坐标系也会随之旋转，所以在旋转之后，在位移就要**注意方向问题**！！！
drawImage()可以将一个其他来源的图片(img标签对象，canvas对象，外部图片等)完整画进或者裁剪部分进当前画布；

 核心代码：

实现思路：
一：先创建一个新的画布，给好宽高------宽高要能展示全原图片信息。

const canvas2 = document.createElement('canvas')
    canvas.parentNode.appendChild(canvas2)
    canvas2.style="border:1px solid #000"
    canvas2.width=150
    canvas2.height=150

二：获取画布实例后，通过translate将画布原点及本体移动到自身中心

const ctx2 = canvas2.getContext('2d')
    ctx2.save()
    ctx2.translate(75,75)

三：rotate旋转想要的角度，这个方法接收的方法是弧度------>（Math.pi/180）*旋转角度。

ctx2.rotate((Math.PI / 180) * 180)

四：再通过translate反向移动 步骤二的大小，此时画布已经在原来位置旋转完成。

ctx2.translate(-75,-75)

五：通过drawImage将图片注入新画布。

ctx2.drawImage(canvas,10,10)

这样就实现了，接下来就是图片的上传及正常的后续处理。