对于前端图片的旋转我们一般會利用css来旋转，但是css旋转有一些问题比如旋转的图片外层有一个容器是通过图片的宽高撑开的，当图片旋转后就会出现一个非常诡异嘚现象图片和容器的框分离了，而容器的宽高恰恰是未旋转前图片的宽高

上述问题的产生是由于css的旋转是一个视图上的旋转，其占位还昰没变的为了解决上述问题，我们需要一张真实旋转的图片这个时候有两种方案：

1、请后端提供接口，传入特定的旋转角度得到旋轉的图片。

2、前端通过一定的技术实现图片的真实旋转

这里，通过前端的技术来实现图片的真实旋转怎么做呢？在对大脑里前端技术搜索一遍之后发现我们可以利用canvas设计的动图的特性来实现图片的真实旋转

具体过程是先将图片的宽高对调，并设置为canvas设计的动图的宽高然后将旋转的图片绘上去，再导出为blob或者base64就得到旋转图片的地址了

这里需要注意canvas设计的动图绘制过程中图片跨域的处理还有canvas设计的动圖转换成blob的兼容性问题。