寒假比赛总结(一) - 解决HTML移动端竖拍照片旋转90度的问题

前言在这次寒假比赛中遇到了许多坑,有些坑堪称奇葩,比如说下面这个比较神奇的坑:HTML5中类型为file的input元素在上传图片,展示出来后,某些手机竖拍的照片会逆时针旋转90度的问题。概述发现这个bug大概在一周前,因为我们这个比赛项目需要用户上传图片,并能在发布之前预览。在预览的时候发现竖着拍的照片居然都旋转了90度!于是Google之,发现基本上所有机型手机的相机都存在这个问题(我当时用于测试的手机是小米Note3 MIUI 9,期间也尝试过iPhone、iPad等机型,均发现此问题)。导致旋转90度的原因大概是HTML自动将旋转角减去了90度。解决问题用到的工具/库要解决这个问题,首先需要读取照片的旋转角度(Orientation),而EXIF.JS可以读出照片的旋转角度:我拿了一张用小米Note3的相机拍摄的照片测试,根据EXIF.JS读出的信息得出这张图片的方向角度是90度。思路其实用EXIF.JS读出来是一堆tags,从tags中找到Orientation的值,如果图片的方向是90度,那么Orientation的值就为6。所以,我们只需要在拿到图片之后放进EXIF.JS里判断一下Orientation的值是否为6,如果为6,那么就将图片绘制到一个隐藏的Canvas里,再使用Canvas的rotate API进行旋转,最后再将修改好的图片输出。步骤在Webpack项目中安装EXIF.JS:npm install exif-js --save 在项目中引入EXIF.JS:import…

给菜单的顶部添加一个小三角形

起因 最近在学习仿制百度首页。百度首页中有一个设置菜单很特别:由无序列表组成,但是外边框的上边缘有一个小三角。于是想做一个仿真的百度设置菜单。 制作 一切由border引起 如何用CSS画出直角三角形?以我当时的CSS知识水平,并没有接触到绘制直角三角形的技巧,直到一位学长的奇技淫巧点醒了我: 使用border!!! 于半懵半醒中,我围观了一波学长大佬的操作: 1.先建立一个边框为红色10px,宽高均为100px的box: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=…

CSS实现毛玻璃效果

思路 在需要进行毛玻璃处理的元素上,使用滤镜blur()进行模糊处理。 困难 仅仅针对该元素使用滤镜,会将整个元素的文字一并模糊,而需要模糊的被元素覆盖的背景部分反而没有被模糊。 解决 为了解决这个问题,参考资料给出的方法是使用伪元素覆盖在该元素上,再在该伪元素上使用同样的背景图片,并设置绝对定位,上下左右的外边距都设成0,以完全覆盖在元素上。 具体实现 将一张图片设成body元素的背景: body{ background-image: url("http://pic1.win4000.com/wallpaper/f/5429075a60431.jpg"); } 定义一个.main,进行一些样式的编写: .main{ height:600px; width:1000px; color: #282c34; border-radius: 5px; position:relative; top:100px; margin:0 auto; padding:…

BootStrap列排序

情境引入 假设一张页面的左部分有一个col-md-8的栏目,右侧有一个col-md-4的侧边栏。在响应式布局时,常常需要将侧边栏放置在col-md-8的上方,于是就可以引出下列代码: <div class="col-md-4"></div> <div class="col-md-8"></div> 但是,由此将会导致一个问题:在正常显示时col-md-4的侧边栏将在col-md-8的左侧! 问题解决 为了解决这一问题,BootStrap提供了push和pull两种列排序的方式。那col-md来说,将一个col向右移动称为col-md-push-,向左移动称为col-md-pull-: <div class="col-md-4 col-md-push-8">.col-md-4</div> <div class=…

通过纯CSS3实现简单的瀑布流布局

原理 CSS3中存在一个column属性,通过设置column可以达到多列布局的要求。 基本语法 column: column-width, column-count column-width:规定每个列的宽度,因为瀑布流布局需要宽相等,高不等; column-count:规定页面中存在的列数,此属性并不常用。 代码的实现 css/style.css .container{ -webkit-column-width: 256px; -moz-column-width: 256px; column-width: 256px; } .box{ margin:10px; width:254px; border:1px solid #CCC; box-shadow: 0 0 15px 0 #CCC; } .box img{ width:246px; margin:4px; } .box p{ margin:6px;…

通过BootStrap实现简单的瀑布流布局

原理 BootStrap自带栅格系统,可以实现多列自适应布局。使用栅格系统进行布局设计可以比较完美地符合瀑布流布局的要求。关于栅格系统,请参见http://boot.lenconda.top/css/#grid 准备工作 1.引入BootStrap BootStrap可以从CDN几点引入,或者从单文件引入: <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> 或者 <link rel="stylesheet"…

JavaScript选项卡切换实例

需求 实现简单的选项卡切换功能 代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0;padding:0;font-size:13px; } li{ list-style-type:none;…

底部版权导航条以及侧边栏的制作

一.侧边栏的实现 1. 设置侧边栏样式 .sidebar{ position:fixed; top:52px; left:0; bottom:0; background: #f5f5f5; padding:20px 0 0 0; } 2.设置侧边栏<a>标签样式 .nav-sidebar li a:hover,.nav-sidebar li a:active,.nav-sidebar li a:focus{ color: #fff; background-color: #428bca; } 3.设置侧边栏自适应 @media (max-width:768px){ .sidebar{ display: none;…