从css3和canvas的旋转说起

之前遇到的一个老问题啦,突然发现又傻傻分不清楚啦。。。来总结一下吧,哈哈。先来说一下,为什么要把这两者放在一起说,先上需求:如何把反着的一张图片弄正,并输出出来呢?也就是我们的目标如图: 这个需求来源于,手机照相机照出的图片其实存起来的时候对于程序显示来说不都是正的,我们自己在手机上浏览看起来是正的是因为手机的程序帮我们搞定啦,可是当我们拿到手机原始图片的时候想展示的时候发现,矣?怎么有的反着的,其实照相机照相的时候会留下照片的方向信息,根据这些方向信息我们就可以把照片调正过来,然后再存到服务器或者展示出来,关于照片里的方向信息大家可以去参考EXIF.js这个库,我总结的信息如下:(EXIF信息有1 8 3 6) »

H5页面 - 小米 Max 微信群聊

开始 上半年小米Max发布的时候,做了一个在朋友圈传播的模仿微信的群聊界面H5页面:一群公司的大咖在群里聊小米Max,用户可以向大咖们提问,以此了解产品。 页面的主体是群聊对话,同时在对话中包含了很多交互:图片、视频、动画、翻译等。如果用户是用微信打开的链接,还会获取用户名和头像,作为页面里的“我”来聊天,效果有点逼真~ 页面里有“彩蛋”,还能求红包喔~ 不啰嗦,先看页面效果。页面地址(手机浏览效果更好)。微信里访问这个链接 »

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候,css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜,搜,搜,半天才搜到合适的解决方法。然后下次遇到,呃,又忘了~ 后来仔细回忆了一下,其实CSS实现竖直居中是有几种不同的应用场景的,需要分别使用不同的解决方法。这也是为啥每次都觉得,诶上次那个解决方法好像不行呢?(原来并不是我智商的问题)好了废话不多说,记录下遇到的不同场景及解决方法,希望能对自己或者别人有所帮助。 inline 或者 inline-* 的元素竖直居中 可以借助 padding, line-height, »

图片不失真自适应水平垂直居中

想到了一个问题 今天在浏览网页的时候看到一种布局突然就想它是怎么实现的呢,看来下发现不是css实现的,是用js实现的觉得如果没有js帮忙呢,就尝试用css看看能不能实现,发现自己基础真的要好好补下了。。哈哈,anyway,需求如下: 图片在屏幕上方块中水平垂直居中 图片宽度和高度都是不确定的 图片宽度和高度自适应其容器,宽度和高度随着容器变化而变化,这时需保证宽高比不变即图片不被拉长或压缩;还需保证宽度和高度都不能超过原始值的大小,这样图片不会失真 尝试实现一下 常见的未知高度的垂直居中的方法选一种就好了。而不失真自适应的原理就是利用我不太常用的max-width: 100%; max-height=100%; 来保证第三条的实现。如果图片的实际宽或高超过了其容器,因为有上面max的限制,浏览器就会按照其容器的宽或高来限制其超出容器。 »