未加星标

从css3和canvas的旋转说起

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

之前遇到的一个老问题啦,突然发现又傻傻分不清楚啦。。。来总结一下吧,哈哈。先来说一下,为什么要把这两者放在一起说,先上需求:如何把反着的一张图片弄正,并输出出来呢?

这个需求来源于手机照相机照出的图片其实存起来的时候对于程序显示来说不都是正的,我们自己在手机上浏览看起来是正的是因为手机的程序帮我们搞定啦,可是当我们拿到手机原始图片的时候想展示的时候发现,矣?怎么有的反正的,其实照相机照相的时候会留下照片的方向信息,根据这些方向信息我们就可以把照片调正过来,然后再存到服务器或者展示出来,关于照片里的方向信息大家可以去参考EXIF.js这个库,我总结的信息如下:(EXIF信息有1 8 3 6)

1: 正向 8: 需要逆时针旋转90 3: 需要旋转180度 6: 需要顺时针旋转90

好了,有了这些信息我们来看看怎么去做呢? 比如有张图是需要旋转90度才能扶正的,那写css3的rotate的不就行了么?是啊,我最初也是这种感觉,可是这样有诸多限制,比如,如果你想把图片存在服务端,下次别人用的时候图片就是正的了,就不用再做特殊处理了啊,那得图像处理下,前端怎么弄呢?canvas应该可以吧!本以为可以像css3那样两行搞定:

transform: rotate(90deg); transform-origin: center;

可是绕了很久才发现不行啊,发现两者是有区别的:

css3是基于图形自身的位置为坐标系进行变换的 canvas有画布的概念,是基于画布坐标系进行变换的

额。。我说完也觉得一脸懵逼,其实我觉得很多概念和感觉对于普通开发者来讲都不是灵感带来的,都是不断试验和思考带来的,所以如果我做不了特斯拉,那我向爱迪生靠近些也是好的,那么动手吧!

例子如下:其中用了三种不同的方式解决,每种方式都可以达到效果,但其实是不一样的,可以注意下每种方式最后留下的坐标系原点在哪里,是的,条条大路通罗马。例子中请按button得先后顺序点击实验,要不然会乱的,因为对顺序有依赖额。。觉得内嵌看得太小的话,可以点击这里点我 特别注意的就是:css3都是基于自身位置的变换,而canvas变换的是坐标系

关键源码如下:

var canvas = document.getElementById('canvas'); var img = new Image(); img.src = './test.jpeg'; img.onload = function() { var cts = canvas.getContext("2d"); canvas.width = this.naturalHeight; canvas.height = this.naturalWidth; cts.clearRect(0, 0, canvas.width, canvas.height); cts.fillStyle = "#000"; cts.fillRect(0, 0, canvas.width, canvas.height); //坐标系变换 cts.translate(canvas.width/2, canvas.height/2); cts.rotate(90*Math.PI/180); [email protected], 移动坐标系的原点 cts.translate(-canvas.height/2, -canvas.width/2); cts.drawImage(img, 0, 0); [email protected],改变图的开始取值点 //cts.drawImage(img, -canvas.height/2, -canvas.width/2); /** 还有什么办法吗? **/ //cts.rotate(90*Math.PI/180); //cts.drawImage(img, 0, -canvas.width); }

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器特斯拉其实需求
分页:12
转载请注明
本文标题:从css3和canvas的旋转说起
本站链接:http://www.codesec.net/view/484391.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(66)