像素

为了兼容黑白电视机和彩色电视机，引入YUV格式代替RGB，其中Y表示亮度， U和V表示色差。 黑白电视机只用Y信号， 而彩色电视机可由YUV转换成RGB再显示颜色。 YUV 和 RGB 转换公式 Y Y = 0.299 x R + 0.587 x G + 0.114 x B + 0 U Cb = -0.169 x R - 0.331 x G + 0.499 x B + 128 V Cr = 0.499 x R - 0.418 x G - 0.0813 x B + 128 YUV4:4:4 同一行的相邻4个像素数据: Y0U0V0 Y1U1V1 Y2U2V2 Y3U3V3 存储时: Y0 U0 V0 Y1 U1 V1 Y2 U2 V2 Y3 U3 V3 //即每个像素YUV的数据都会存放起来 为什么叫4:4:4 , 意思就是4个像素里的数据有4个Y,4个U,4个V YUV4:2:2 其实绝大部分相邻的两个像素，数据差异应不大。所以为了节点空间便于存储，丢失每个像素的部分数据。研究表明人对亮度比较敏感，而对色彩不敏感。所以每个像素的亮度Y数据是绝对不动，对色差数据可以进行丢弃。 同一行的相邻4个像素数据:Y0U0V0 Y1U1V1 Y2U2V2 Y3U3V3 存储时: Y0 U0 Y1 V1 Y2 U2 Y3 V3 // 每两个相邻的像素，一个丢弃V数据，一个丢弃U数据 为什么叫4:2

形态学基本概念 基本思想：用一定形态的结构元素去度量和提取图像中的对应形状，达到分析知识的目的。可用于图像处理的各个方面，包括图像分割、边界检测、特征提取。 结构元素：形态学变换中的基本元素，使为了探测图像的某种结构信息而设计的特定形状和尺寸的图像，称为收集图像结构信息的探针。 结构元素有多种类型：如圆形、方形、线型等，可携带知识（形态、大小、灰度和色度信息）来探测、研究图像的结构特点。 形态学运算包括：二值化腐蚀和膨胀、二值化开闭运算、骨架抽取、击中击不中变换等。 形态学四个基本算子：膨胀，腐蚀、开启和闭合组成，这些基本运算还可以推导和组合成各种数学形态学实用算法。 腐蚀运算 腐蚀运算思路 ：定义结构元素(与模板类似)，结构元素在整幅图像中移动，移动到每个像素点上，只有结构元素与图像上对应像素点的像素值全部相等时，保留这个像素点的值。 腐蚀运算作用 ：消除物体边界点，使边界点向内部收缩，可以把小于结构元素的物体去除。选取不同大小的结构元素，去除不同大小的物体。如两个物体间有细小的连通，通过腐蚀可以将两个物体分开。 腐蚀运算 ： 腐蚀运算示意图 ： 基本方法： 通常拖到结构元素在X域移动，在每一个位置上，当结构元素B在中心平移到X图像上的某优点(x,y)。 如果结构元素内的每一个像素都与以(x,y)为中心的相同邻域中对应像素完全相同，那么就保留(x,y)像素点。

论文： Towards End-to-End Lane Detection: an Instance Segmentation Approach 代码：https://github.com/MaybeShewill-CV/lanenet-lane-detection 参考： 车道线检测算法LaneNet + H-Net（论文解读） Overview 本文提出一种端到端的车道线检测算法，包含 LanNet + H-Net 两个网络模型。其中 LanNet 是一种将语义分割和对像素进行向量表示结合起来的 多任务模型 ，最后利用 聚类 完成对车道线的实例分割。H-Net 是有个小的网络结构，负责预测 变换矩阵 H ，使用转换矩阵 H 对同属一条车道线的所有像素点进行重新 建模 （使用 y 坐标来表示 x 坐标）。 LaneNet 论文中将实例分割任务拆解成语义分割（LanNet 一个分支）和聚类（LanNet一个分支提取 embedding express, Mean-Shift 聚类)两部分。如上图所示，LanNet 有两个分支任务，分别为 a lane segmentation branch and a lane embedding branch 。 Segmentation branch负责对输入图像进行语义分割（对像素进行二分类，判断像素属于车道线还是背景）；Embedding

如果布局使用百分比宽度，在不同的显示器上效果可能不太一样。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。 将固定像素宽度转换对应的百分比宽度： 目标元素宽度/上下文元素宽度=百分比宽度 em代替px主要是为了文字缩放。针对老版本IE，现在浏览器支持缩放像素为单位的文字了。优点： 1.使用IE6的用户也将能缩放文字 2.em的实际大小是相对于其上下文的字体大小而言。 现代浏览器的默认文字大小都是16像素（显示申明的除外） 一开始给body标签应用下列任何一条规则所产生的效果都一样： font-size:100%; font-size:16px; font-size:1em; 行高相对于其元素本身的文字大小而言 图片随着流动布局相应缩放。 img{max-width:100%;} 这样就可以使图片自动缩放到与其容器100%匹配，可以将同样的样式应用到其他多媒体标签上。如： img,object,video,embed{max-width:100%;} 这些多媒体元素都可以自动缩放了。但是，对于采用的<iframe>显示视频的网站，这个技术不行。 max-width用像素做单位时，表示超过多大，元素将不再放大 例子：导航链接在特定的视口宽度下会折成两行或在1060像素下散得太开而在768像素下显示正常，样式可以设置如下 @media screen and (min-width

自适应网页设计（Responsive Web Design） 　　随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 　　手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。 　　很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。 于是，很早就有人设想，能不能"一次设计，普遍适用"，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？ 一、"自适应网页设计"的概念 　　2010年，Ethan Marcotte提出了 "自适应网页设计" （Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个 范例 ，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。 本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。 一、英寸 一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。 英寸和厘米的换算：1英寸 = 2.54 厘米 二、物理像素 2.1 像素 像素即一个小方块，它具有特定的位置和颜色。 图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。 像素可以作为图片或电子屏幕的最小组成单位。 2.2 物理像素 到电商网站购买手机，都会看一看手机的参数，以apple的官网上对手机分辨率的描述为例： iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。表示手机分别在垂直和水平上所具有的像素点数。 这里描述的就是屏幕实际的物理像素，即一个屏幕具体由多少个像素点组成。 屏幕从工厂出来那天起

最邻近插值： 这是一种最为简单的插值方法，在图像中最小的单位就是单个像素，但是在旋转个缩放的过程中如果出现了小数，那么就对这个浮点坐标进行简单的取整，得到一个整数型坐标，这个整数型坐标对应的像素值就是目标像素的像素值。取整的方式就是：取浮点坐标最邻近的左上角的整数点。 举个例子： 3*3的灰度图像，其每一个像素点的灰度如下所示 我们要通过缩放，将它变成一个4*4的图像，那么其实相当于放大了4/3倍，从这个倍数我们可以得到这样的比例关系： 根据公式可以计算出目标图像中的(0,0)坐标与原图像中对应的坐标为(0,0) （由于分母不能为0，所以我们将公式改写） 然后我们就可以确定出目标图像中(0,0)坐标的像素灰度了，就是234。 然后我们在确定目标图像中的(0,1)坐标与原图像中对应的坐标，同样套用公式： 我们发现，这里出现了小数，也就是说它对应的原图像的坐标是(0,0.75)，显示这是错误的，如果我们不考虑亚像素情况，那么一个像素单位就是图像中最小的单位了，那么按照最临近插值算法，我们找到距离0.75最近的最近的整数，也就是1，那么对应的原图的坐标也就是(0,1)，像素灰度为67。 双线性内插值： 对于一个目的像素，设置坐标通过反向变换得到的浮点坐标为(i+u,j+v)，其中i、j均为非负整数，u、v为[0,1)区间的浮点数，则这个像素得值 f(i+u,j+v) 可由原图像中坐标为

原理： 1、获取图像的灰度(gray)图片 2、设计一个小方框（4x4 or 8x8 or 10x10等），统计每个小方框的像素值 3、将0-255的灰度值划分成几个等级，并把第二步处理的结果映射到所设置的各个等级中，并计数 4、找到每个方框中灰度等级最多的所有的像素，并且求取这些像素的均值 5、用统计出来的平均值来替代原来的像素值 import cv2import numpy as npimg = cv2.imread('D:/pythonob/imageinpaint/img/zidan.jpg', 1)imgInfo = img.shapeheight = imgInfo[0]width = imgInfo[1]gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)dst = np.zeros((height, width, 3), np.uint8)pixel_class = 4section = int(256 / pixel_class)# 用两层for循环来遍历图片的每个数据for i in range(3, height - 3): for j in range(3, width - 3): # 当前程序中定义的灰度等级是4个 # 定义一个数组来装载这4个等级内的像素个数 array1 = np.zeros(pixel_class,

文章目录 一、概念 1.px(像素) 2.dp(设备独立像素) 3.sp(放大像素) 4.ppi(像素密度) 5.dpi(屏幕密度) 二、换算 1.px和dp 2.ppi 3.dpi 一、概念 px : pixels(像素) dp/dip : device independent pixels(设备独立像素) sp : scaled pixels(放大像素) ppi : pixels per inch(像素密度，所表示的是每英寸所拥有的像素数量) dpi : dots per inch(每英寸的点数) 1.px(像素) 一个像素通常被视为图像的最小的完整采样。通常所说的分辨率比如1280 * 720，指的就是可以显示1280 * 720个像素。 2.dp(设备独立像素) 这个和设备硬件有关，不同设备有不同的显示效果。在做项目时，为了适配市场上繁多的手机分辨率，建议使用dp。 3.sp(放大像素) SP 全称是 Scale-independent Pixels，用于 字体大小 ，其概念与DP是一致的，也是为了保持设备无关。 4.ppi(像素密度) 屏幕分辨率大不一定意味着显示更清晰，因为手机尺寸不知道，而屏幕的ppi越高，表示屏幕的像素密度越高，这样屏幕内容看起来就更加细腻，看起来也就更加真实。 5.dpi(屏幕密度) 屏幕密度与dpi密切相关，dpi是每英寸的点数。也就是说

移动端开发的干货篇 之前写了一篇文章 《一篇真正教会你开发移动端一面的文章(一)》 。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面 好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件： 移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多以iPhone5和iPhone6的设备像素尺寸作为依据，比如拿到一张PSD设计图，它的总宽度为640px(iPhone5)或者750px(iPhone6)。本例就拿iPhone6的设计图尺寸为标准进行讲解，其它设计图尺寸道理是一样的，这并不影响我们的开发。 首先我们要有一张设计图才行，看下图，假设我们有一张设计图，它很简单，只有一个红色的方块： 拿到了设计图，于是你开开心心的开始写代码了，你打开了编辑器，并写下了如下HTML代码： <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> </head> <body>