Tagged

canvas

A collection of 1 post

js

从css3和canvas的旋转说起

之前遇到的一个老问题啦,突然发现又傻傻分不清楚啦。。。来总结一下吧,哈哈。先来说一下,为什么要把这两者放在一起说,先上需求:如何把反着的一张图片弄正,并输出出来呢?也就是我们的目标如图: 这个需求来源于,手机照相机照出的图片其实存起来的时候对于程序显示来说不都是正的,我们自己在手机上浏览看起来是正的是因为手机的程序帮我们搞定啦,可是当我们拿到手机原始图片的时候想展示的时候发现,矣?怎么有的反着的,其实照相机照相的时候会留下照片的方向信息,根据这些方向信息我们就可以把照片调正过来,然后再存到服务器或者展示出来,关于照片里的方向信息大家可以去参考EXIF.js这个库,我总结的信息如下:(EXIF信息有1 8 3 6) 1: 正向 8: 需要逆时针旋转90 3: 需要旋转180度 6: 需要顺时针旋转90 好了,有了这些信息我们来看看怎么去做呢? 比如有张图是需要旋转90度才能扶正的,那写css3的rotate的不就行了么?是啊,我最初也是这种感觉,可是这样有诸多限制,比如,如果你想把图片存在服务端,下次别人用的时候图片就是正的了,就不用再做特殊处理了啊,那得图像处理下,前端怎么弄呢?canvas应该可以吧!本以为可以像css3那样两行搞定: transform: