exiforientationjs

『壹』 关于手机拍照后上传，上传角度旋转问题总结

iphone默认正平拍照为正确的方向，竖屏拍照会携带逆时针旋转90的信息，也就是Orientation (rotation)

可参考下图理解

资料： http://www.cocoachina.com/ios/20150605/12021.html

        https://www.jianshu.com/p/ad4501db178e/

解决思路：

引入了一个叫做  exif.js  的吵敬档库来实现旋转角度的纠正，它提供了js读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

解决方法：

1.在保存图片至服务器之前读取图升乱片的拍照方向信息，根据旋转角度做稿拿处理，将处理后的图片上传至服务器，显示

优点：预览的图片和大后台审核的图片一致

缺点:据开发说比较难处理

2.将图片上传至服务器，前端读取图片信息，在展示前做旋转角度处理，显示

优点：能快速解决当前出现的问题

缺点：大后台审核的小伙伴审核时看图比较难受

Andriod的情况就比较复杂了，就我们公司现有的机型来看，得出以下结论，垂直角度拍摄上传，显示正常

唯一一个 有问题的是三星手机参考资料 https://www.jianshu.com/p/01d0fd4b4bfe ，跟ios问题一样

资料： https://www.jianshu.com/p/7d88ec1347b6

『贰』 微信公众平台本地上传的图片为何原图竖的，上传上来就变横的了，也不能旋转。

您好！很高兴能为您解答， 微信公众号图文编辑对话框不支持进行图标旋转编辑，要先处理好图片再上传到微信素材库里边。图片太大就不行，改小了就好了。最好在4M以内。
工具：图片处理软件
1，在图片上传之前在图片处理软件里边把图片进行旋转后保存，

2，然后进行保存后上传到微信公众号素材库饥迅。

3，然后再进行插入到图文素材烂瞎此神槐里边就是刚刚保存的样子了，

『叁』 js 大文件分片上传处理如何实现

推荐采用webuploader控件来解决。
关于WebUploader的功能说明：
大文件上传续传
支持超大文件上传(100G+)和续传，可以关闭浏览器，重启系统后仍然继续上传。
开源
提供ASP.NET,JSP,PHP示例和源代码，其中JSP提供MySQL,Oracle,SQL Server数据库的配置和示例代码。
分片、并发
分片与并发结合，将一个大文件分割成多块，并发上传，极大地提高大文件的上传速度。
当网络问题导致传输错误时，只需要重传出错分片，而不是整个文件。另外分片传输能够更加实时的跟踪上传进度。
预览、压缩
支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩，节省网络数据传输。
解析jpeg中的meta信息，对于各种orientation做了正确的处理，同时压缩后上传保留图片的所有原始meta数据。
多途径添加文件
支持文件多选，类型过滤，拖拽(文件&文件夹)，图片粘贴功能。上传本地指定路径的文件，不需要通过点击按钮选择文件。
粘贴功能主要体现在当有图片数据在剪切板中时（截屏工具如QQ(Ctrl + ALT + A), 网页中右击图片点击复制），Ctrl + V便可添加此图片文件。
HTML5 & FLASH
兼容主流浏览器和低版本浏览器，接口一致，实现了两套运行时支持，用户无需关心内部用了什么内核。而且支持IE6，IE8浏览器。
同时Flash部分没有做任何UI相关的工作，方便不关心flash的用户扩展和自定义业务需求。
基于内存映射模式进行IO操作，充分发挥操作系统性能。
MD5秒传
当文件体积大、量比较多时，支持上传前做文件md5值验证，一致则可直接跳过。
如果服务端与前端统一修改算法，取段md5，可大大提升验证性能，耗时在20ms左右。
易扩展、可拆分
采用可拆分机制, 将各个功能独立成了小组件，可自由搭配。
采用AMD规范组织代码，清晰明了，方便高级玩家扩展。

『肆』 JS 如何获取和监听屏幕方向的改变

大概写一下：

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下：

window.addEventListener("orientationchange", function() {

// 宣布新方向的数值

alert(window.orientation);

}, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

}, false);

css判断横竖屏幕

代码如下:

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一个媒体查询改变监听者

mql.addListener(function(m) {

if(m.matches) {

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";

}

else {

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向

}

});

『伍』 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
链接：http://www.jianshu.com/p/ad4501db178e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

『陆』 前端图片 js 怎么判断相机是横拍还是竖拍

CSS判断横槐灶屏竖屏 写在同一孝斗个CSS中
@media screen and (orientation: portrait) { /*竖屏巧明磨 css*/ }
@media screen and (orientation: landscape) { /*横屏 css*/}

『柒』 js如何判断手机当前状态是横屏还是竖屏

判断是横屏还是竖屏的方法:
function orient() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏；Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏；Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//页面加载时调用
$(function(){
orient();
});
//用户变化屏幕方向时调用
$(window).bind( 'orientationchange', function(e){
orient();
});

『捌』 微信公众平台本地上传的图片为何原图竖的，上传上来就变横的了，也不能旋转。

公众号里面图片不能旋转，只能剪辑。

微信公众平台，简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号，最终定位为“公众平台”，无疑让我们看到一个微信对后续更大的期望。

利用公众账号平台进行自媒体活动，简单来说就是进行一对多的媒体性行为活动，如商家通过申请公众微信服务号通过二次开发展示商家微官网、微会员、微推送、微支付、微活动、微报名、微分享、微名片等，已经形成了一种主流的线上线下微信互动营销方式。

2018年1月5日，微信公众平台公告：规范“非固定收益类投资产品”类信息发布。即日起微信公众平台将配合微信安全中心的打击行动，针对相关诈骗、骚扰等违法违规的信息和公众号进行处理。

“非固定收益类投资产品”指包括但不限于股票、期权、期货、外汇、大宗商品、电子货币等本金或收益存在不确定性的投资产品。

2018年7月19日，微信公众平台“转载可赞赏作者”暂时下线。

2019年8月26日，微信公众平台已经汇聚超2000万公众账号，不少作者通过原创文章和原创视频形成了自己的品牌，成为了微信里的创业者。

服务号功能：

公众平台服务号，是公众平台的一种账号类型，旨在为用户提供服务。

1、1个月（自然月）内仅可以发送4条群发消息。

2、发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中，相对应微信的首页。

3、服务号会在订阅用户（粉丝）的通讯录中。通讯录中有一个公众号的文件夹，点开可以查看所有服务号。

4、服务号可申请自定义菜单。