div 宽和高要设定。
image宽度设为100%就行了,高度会自动按比例缩放。
如果你想铺满div而无视长宽比例,那么把image高度也设为100%就行了。但是这样image会变形,不推荐(除非你确定长宽和div长宽同比例)。
<div id="header" >
<DIV ID="LOGO">logo</DIV>
#以图换字,logo图写进bg里,然后左浮动
<DIV ID="ad"><a href=><img /></a></DIV>
<DIV ID="topnav">加入收藏 设为主页</DIV>
</div>
它的主要功能就是上传两张人像,通过算法进行分析对比,最后得出一个相似度的分数,以验证你们是天造地设还是颜值互补。
但是,当我们把上传的转换成base64格式,发送给后台时,会发现偶尔会出现问题,有一些本来是这样的:
柴犬
处理之后却变成了这样:
柴犬2
经过测试发现,只有iOS手机竖着拍的照片才会出现这样的问题,而iOS手机横着拍的照片、Android手机拍的照片以及通过屏幕截图、网络下载等途径获得的都不会产生这个问题。
那么,这到底是为什么呢?
在开发过程中,由于时间紧迫,未求甚解,使用了github上的一个开源项目 lrzjs 来解决此问题,这个工具的主要用途是在尽量保证质量的前提下压缩的大小,但同时也附带了旋转角度纠正的功能。
通过阅读 lrzjs 的源代码,我发现它引入了一个叫做 exifjs 的库来实现旋转角度的纠正,它提供了js读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。而拍照方向就是关键所在!
exifjs 获取图像的拍照方向的代码如下:
EXIFgetData(IMG_FILE, function () { // IMG_FILE为图像数据
var orientation = EXIFgetTag(this, "Orientation");
consolelog("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°!
那么如何纠正这个旋转角度呢?
其实思路也很简单:在处理之前,先读取并保存的拍照方向信息,然后在处理之后,再根据拍照方向,对进行相应的调整,lrzjs 中的代码如下:
switch (orientation) {
case 3:
ctxrotate(180 MathPI / 180);
ctxdrawImage(img, -resizewidth, -resizeheight, resizewidth, resizeheight);
break;
case 6:
ctxrotate(90 MathPI / 180);
ctxdrawImage(img, 0, -resizewidth, resizeheight, resizewidth);
break;
case 8:
ctxrotate(270 MathPI / 180);
ctxdrawImage(img, -resizeheight, 0, resizeheight, resizewidth);
break;
case 2:
ctxtranslate(resizewidth, 0);
ctxscale(-1, 1);
ctxdrawImage(img, 0, 0, resizewidth, resizeheight);
break;
case 4:
ctxtranslate(resizewidth, 0);
ctxscale(-1, 1);
ctxrotate(180 MathPI / 180);
ctxdrawImage(img, -resizewidth, -resizeheight, resizewidth, resizeheight);
break;
case 5:
ctxtranslate(resizewidth, 0);
ctxscale(-1, 1);
ctxrotate(90 MathPI / 180);
ctxdrawImage(img, 0, -resizewidth, resizeheight, resizewidth);
break;
case 7:
ctxtranslate(resizewidth, 0);
ctxscale(-1, 1);
ctxrotate(270 MathPI / 180);
ctxdrawImage(img, -resizeheight, 0, resizeheight, resizewidth);
break;
default:
ctxdrawImage(img, 0, 0, resizewidth,resizeheight);
}
其中,translate是平移变换,scale(-1,1)是向左翻转,rotate是顺时针旋转。
举例说明 case 2,当的拍照方向为2时,即第一行位于顶端,而第一列位于右侧,其实相当于把照片进行了左右的翻转。所以,这里对的 *** 作是,先向右平移等于宽度的距离,再向左翻转,这相当于以水平方向的对称轴为轴进行了左右翻转,然后再以(0,0)为起始点绘制原宽高的,即完成了对拍照方向的纠正。
最后
经过一系列的测试,发现确实只有iOS手机的竖拍照片与横拍照片是通过拍照方向来区别的,Android手机无论竖拍还是横拍的照片,拍照方向都为1,也就是说即使丢失了拍照方向这一信息,也不会影响到的旋转角度。而手机或电脑的屏幕截图、网络上的、通过PS制作的等也是如此。
作者:任无名F
链接:>
以上就是关于CSS能设置div之后将div中img的超出尺寸不顶出去吗全部的内容,包括:CSS能设置div之后将div中img的超出尺寸不顶出去吗、请IDV+CSS高手帮我写一个顶部代码!!、ios html5 拍照上传 照片调整90度 为什么上传之后 又返回来了等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)