html5图片翻转,html 图片翻转

ios html5 拍照上传 照片调整90度 为什么上传之后 又返回来了

它的主要功能就是上传两张人像，通过算法进行分析对比，最后得出一个相似度的分数，以验证你们是天造地设还是颜值互补。

但是，当我们把上传的图片转换成base64格式，发送给后台时，会发现偶尔会出现问题，有一些图片本来是这样的：

柴犬

处理之后却变成了这样：

柴犬2

经过测试发现，只有iOS手机竖着拍的照片才会出现这样的问题，而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的图片都不会产生这个问题。

那么，这到底是为什么呢？

在开发过程中，由于时间紧迫，未求甚解，使用了github上的一个开源项目 lrz.js 来解决此问题，这个工具的主要用途是在尽量保证图片质量的前提下压缩图片的大小，但同时也附带了图片旋转角度纠正的功能。

通过阅读 lrz.js 的源代码，我发现它引入了一个叫做 exif.js 的库来实现旋转角度的纠正，它提供了js读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在！

exif.js 获取图像的拍照方向的代码如下：

EXIF.getData(IMG_FILE, function () { // IMG_FILE为图像数据

var orientation = EXIF.getTag(this, "Orientation");

console.log("Orientation:" + orientation); // 拍照方向

});

获取拍照方向的结果为1-8的数字：

拍照方向信息

注意：对于上面的八种方向中，加了*的并不常见，因为它们代表的是镜像方向，如果不做任何的处理，不管相机以任何角度拍摄，都无法出现镜像的情况。

这个表格代表什么意义？我们来看第一行，值为1时，右边两列的值分别为：Row #0 is Top，Column #0 is Left side，其实很好理解，它表示照片的第一行位于顶端，而第一列位于左侧，那么这张照片自然就是以正常角度拍摄的。

而这8种结果，就是第一行与第一列所在的位置的8种组合。

那么，我们来测试一下iOS手机横着拍的照片，来看看它的拍照方向是什么呢？

测试1

结果是1，即以正常角度拍摄的，其实也就是原图啦~

那么，我们再测试一下iOS手机竖着拍的照片，来看看它的拍照方向是什么呢？

测试2

原来是6！即第一行位于右侧，第一列位于顶端，其实相当于将照片顺时针旋转了90度！

所以，实际上iOS手机竖着拍出的照片与横着拍出的照片其本质上是一样的，只不过竖着拍出的照片被添加了一个顺时针旋转90°的拍照方向，所以显示的时候，就变成了上下边窄左右边宽的状态，其实也就是横着拍的照片顺时针旋转90°而成的~

那么明白了这些，文章开头所说的照片旋转bug的原因，也就很简单啦~

其实就是当我们在前端对图片进行像素处理或者drawInRect等操作之后，照片的Orientaion信息，即为拍照方向信息被删除了，所以iOS手机竖着拍的照片又回到了横着的状态，看起来也就是逆时针旋转了90°！

那么如何纠正这个旋转角度呢？

其实思路也很简单：在处理图片之前，先读取并保存图片的拍照方向信息，然后在处理图片之后，再根据拍照方向，对图片进行相应的调整，lrz.js 中的代码如下：

switch (orientation) {

case 3:

ctx.rotate(180 * Math.PI / 180);

ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);

break;

case 6:

ctx.rotate(90 * Math.PI / 180);

ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);

break;

case 8:

ctx.rotate(270 * Math.PI / 180);

ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);

break;

case 2:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.drawImage(img, 0, 0, resize.width, resize.height);

break;

case 4:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(180 * Math.PI / 180);

ctx.drawImage(img, -resize.width, -resize.height, resize.width, resize.height);

break;

case 5:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(90 * Math.PI / 180);

ctx.drawImage(img, 0, -resize.width, resize.height, resize.width);

break;

case 7:

ctx.translate(resize.width, 0);

ctx.scale(-1, 1);

ctx.rotate(270 * Math.PI / 180);

ctx.drawImage(img, -resize.height, 0, resize.height, resize.width);

break;

default:

ctx.drawImage(img, 0, 0, resize.width,resize.height);

}

其中，translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。

举例说明 case 2，当图片的拍照方向为2时，即第一行位于顶端，而第一列位于右侧，其实相当于把照片进行了左右的翻转。所以，这里对图片的操作是，先向右平移等于图片宽度的距离，再向左翻转，这相当于以图片水平方向的对称轴为轴进行了左右翻转，然后再以（0，0）为起始点绘制原宽高的图片，即完成了对拍照方向的纠正。

最后

经过一系列的测试，发现确实只有iOS手机的竖拍照片与横拍照片是通过拍照方向来区别的，Android手机无论竖拍还是横拍的照片，拍照方向都为1，也就是说即使丢失了拍照方向这一信息，也不会影响到图片的旋转角度。而手机或电脑的屏幕截图、网络上的图片、通过PS制作的图片等也是如此。

作者：任无名F

链接：

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

HTML5实现图片拖动，旋转，放大，拉伸等特效后保存效果

可以设置cookie（可以加载一个cookie.min.js，使用起来非常方便）。就是当第一次进入页面的时候，先去读取该cookie，如果存在，说明之前已经做了更改，把cookie值稍作处理就可以完成初始化了（记得当初始化完成后删除该cookie），如果cookie不存在说明还没有做过更改。

html5怎样做出图片转圈的动画效果

可以使用css3中的rotate实现

实际的旋转效果是这样：

rotate中的 60deg 表示按最原始的位置，顺时针旋转60°

w3school 里面有更详细用法，可以2D旋转、3D旋转

可以参考：网页链接

动画效果可以通过js改变rotate中传入的值来实现

网页设计中怎么实现图片旋转

css3 的transform属性允许我们旋转、缩放和移动元素。 可以通过给它传递一个 rotate(度数) 值来旋转一个元素，正值表示顺时针方向旋转，负值表示逆时针方向旋转，旋转的中心点为元素的中心。

CSS代码如下：

.rotate{

-ms-transform:rotate(90deg); /* IE 9 */

-moz-transform:rotate(90deg); /* Firefox */

-webkit-transform:rotate(90deg); /* Safari and Chrome */

-o-transform:rotate(90deg); /* Opera */

}

浏览器支持：Firefox 4+、Oprea 10+、Safari 3.1+、Chrome 8+、IE 9+

HTML5中，如何控制canvas旋转图片？

要控制canvas旋转图片需要用到HTML5中canvas的rotate方法。我们通过一个具体的示例进行分析。

!DOCTYPE html

html

head

meta charset="utf-8"

title图片旋转/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//1、 获取到画布对象以及画布的上下文对象

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

//2、 在画布上进行图片绘制

var img = new Image();

img.src = 'fist-pump-baby.jpg';//这里是绘制图片的路径

img.onload = function() {

context.drawImage(img, 0, 0);

}

//3、 设置画布旋转

context.rotate(0.2);//通过rotate方法以弧度为参数旋转图像

//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。

//context.rotate(degreesToRadians(-15));

}

/script

script src="jquery.js"/script

/body

/html

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。

html怎样让图片的旋转？

css代码：

.rotator

{

text-align:center;

}

.rotator img {

-webkit-transition: all 1s ease-in-out;

-moz-transition: all 1s ease-in-out;

-o-transition: all 1s ease-in-out;

-ms-transition: all 1s ease-in-out;

}

.rotator img:hover {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

}

/*360deg是360度，度你可以自己写*/