像素

meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？ 不急，我们先往下面看，这里先留个悬念。 几个专有名词和单位 这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。 首先，先来看一下 物理像素 。 以iphone6为例，可知道： 分辨率 ：1334pt x 750pt 指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。 屏幕尺寸 ：4.7in 注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。 屏幕像素密度 ：326ppi 指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时， 屏幕像素密度 = 分辨率 / 屏幕尺寸 接着，我们来看一下其他的单位。 设备独立像素 ：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是， 物理像素 开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

原文：http://www.cnblogs.com/chris-oil/p/5367106.html 初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。 现象 首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3

传统的网站如何完成向移动设备的快速转型？ 通过移动适配技术可以实现，切图网是国内首家基于web技术服务的公司，而移动适配主要通过底层的web技术开发手段来完成，下面切图网将从技术角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！ 1允许网页宽度自动调整 “自适应网页设计”到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。 2、不使用绝对宽度 由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。 具体说，CSS代码不能指定像素宽度： width:xxxpx; 只能指定百分比宽度： width:xx%; 或者 width:auto; 3、相对大小的字体 字体也不能使用绝对大小（px），而只能使用相对大小（em）。 body{ font:normal100%Helvetica,Arial,sans-serif; } 上面的代码指定

我在另一篇文章中谈到过一些 移动端分辨率自适应问题 ，主要是基于个人实际开发中遇到的问题提出的解决方法。 近期有幸听到他人对移动web开发的分享，特来补充上一篇文章，向大神讨教。 Part 1 理解关于长度单位的一些概念 1、设备像素或逻辑像素 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （还是不理解？？太正常了，接着往下看） 2、CSS像素或设备独立像素 指CSS样式代码中使用的逻辑像素，即px（在iPhone中单位为pt） （这个好理解吧） 3、像素密度（PPI） 指设备能控制显示的最小物理单位，意指屏幕上一个个的点 （嘻嘻，=设备像素或逻辑像素） PPI越高，分辨率也就越高 4、像素比（dpr） 设备像素比=设备像素/CSS像素 比如：iPhone6的像素比为2 = 750/375 在开发中，UI设计狮以设备像素制作设计图； 前端攻城狮把设备像素按照像素比进行换算，得到CSS像素，以此为单位制作网页 进一步举例理解，在普通屏和2dpr下，css像素和设备像素的情况 以下两种情况都会带来一定的图片不正常的问题 Part 2 关于视口的概念 1、Layout viewport（布局视口） 浏览器默认设置了一个viewport 元标签，定义一个的虚拟视口，用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px

viewport 语法介绍 <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] "/> width 控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height 和 width 相对应，指定高度。 initial-scale 初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。 maximum-scale 最大缩放

场景： 人物：前端实习生「阿树」与 切图工程师「玉凤」 事件：设计师出设计稿，前端实现页面 玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞ 阿树：~(>_<)~毛问题噶啦~ 阿树：哇靠，为啥你给的设计稿是640px宽 ，iPhone 5不是320px宽吗？？？ 玉凤：A pixel is not a pixel is not a pixel, you know ? 阿树：(#‵′)，I know Google。。。 为什么会出现以上的情况，难道他们当中一位出错了，摆了这样的乌龙？ 事实上，他们都是对的，只是谈的不是同一个「像素」。 此像素非彼像素 设备像素(device pixel) : 设备像素设是物理概念，指的是设备中使用的物理像素。 比如iPhone 5的分辨率640 x 1136px。 CSS像素(css pixel) : CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。 在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。 比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px

图像分割—基于图的图像分割（Graph-Based Image Segmentation） Reference: Efficient Graph-Based Image Segmentation,IJCV 2004,MIT Code Graph-Based Segmentation 是经典的图像分割算法，作者Felzenszwalb也是提出DPM算法的大牛。该算法是基于图的 贪心聚类 算法，实现简单，速度比较快，精度也还行。不过，目前直接用它做分割的应该比较少，毕竟是99年的跨世纪元老，但是很多算法用它作垫脚石，比如Object Propose的开山之作《Segmentation as Selective Search for Object Recognition》就用它来产生过分割（oversegmentation）。还有的语义分割(senmatic segmentation )算法用它来产生超像素（superpixels）具体忘记了…… 图的基本概念 因为该算法是将照片用加权图抽象化表示，所以补充图的一些基本概念。 图 是由 顶点 集 （vertices）和 边 集 （edges）组成，表示为 ，顶点 ，在本文中即为单个的像素点，连接一对顶点的边 具有 权重 ，本文中的意义为顶点之间的 不 相似度，所用的是 无向图 。 树： 特殊的图，图中任意两个顶点，都有路径相连接，但是没有

像素积分图计算： 1 #include <opencv2/opencv.hpp> 2 #include <iostream> 3 4 using namespace cv; 5 6 int main(int argc, char** argv) { 7 Mat src = imread("L:/5.jpg", IMREAD_GRAYSCALE); 8 if (src.empty()) { 9 printf("could not load image...\n"); 10 return -1; 11 } 12 namedWindow("input image", CV_WINDOW_AUTOSIZE); 13 imshow("input image", src); 14 15 Mat sumii = Mat::zeros(src.rows + 1, src.cols + 1, CV_32FC1); //参数1.左上角像素和 16 Mat sqsumii = Mat::zeros(src.rows + 1, src.cols + 1, CV_64FC1);//参数2.左上角像素平方和 17 integral(src, sumii, sqsumii); //积分算法API 18 19 Mat iiResult; 20 normalize(sumii, iiResult, 0, 255,

3.glPixelStore 像glPixelStorei(GL_PACK_ALIGNMENT, 1)这样的调用，通常会用于像素传输(PACK/UNPACK)的场合。尤其是导入纹理(glTexImage2D)的时候： C++代码 glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glTexImage2D(,,,, &pixelData); glPixelStorei(GL_UNPACK_ALIGNMENT, 4); 很明显地，它是在改变某个状态量，然后再Restore回来。——为什么是状态？你难道8知道OpenGL就是以状态机不？——什么状态？其实名字已经很直白了，glPixelStore这组函数要改变的是像素的存储格式。 涉及到像素在CPU和GPU上的传输，那就有个 存储格式 的概念。在本地内存中端像素集合是什么格式？传输到GPU时又是什么格式？格式会是一样么？在glTexImage2D这个函数中，包含两个关于颜色格式的参数，一个是纹理（GPU端，也可以说server端）的，一个是像素数据（程序内存上，也就是client端）的，两者是不一定一样的，哪怕一样也无法代表GPU会像内存那样去存储。或者想象一下，从一张硬盘上的图片提取到内存的像素数据，上传给GPU成为一张纹理，这个“纹理”还会是原来的那种RGBARGBA的一个序列完事么？显然不是的

第一题 打开压缩包得到的是一张PNG格式的图片 首先拖放到010Editor中： CTRL+F 搜索IHDR发现只有一个，没有其他问题 然后放到KALI中分析一波： 图片能够在kali中打开，说明不是宽高的隐写，因为如果修改了宽高在linux中是无法正常显示的 然后binwalk分析一波： 同样的没有什么问题 最后就是放到 stegslove里面试一试了 简单的科普一下png的知识 png支持RGBA四个通道，每个通道占8个二进制位，隐写文件或数据一般都在各个通道的低位，因为低位的变化不会引起较大的视觉变化，图片看上去还是原来的图片，但是你不知道是在哪个通道，这里有4个通道，如果藏在一个通道的低位的话，有四种可能，如果藏在两个通道的低位的话，可能进行各种运算操作后出现新的图片，加减乘除与或异或 发现Red plane 0是空的，按理来说应该也是”雪花“的，所以应该是有问题的 然后 Analyse - Data Extract，查看该通道，得知是LSB隐写 后面得知就是吧Alpha、Red、Green、Blue 0通道进行异或处理就能够得到flag了，可以通过stegslove获得，下面说一下通过python编写脚本进行色道分离异或处理的方法： #代码参考自合天智汇 import cv2 import numpy as np import os def lowbit(x):