retina | 易学教程

Chrome extension screenshot partial image cropping for Retina Display

阅读更多关于 Chrome extension screenshot partial image cropping for Retina Display

问题 I made a chrome extension, which captures a single element (div) of a website. I used chrome.tabs > captureVisibleTab to make a screenshot. Then, with the coordinates (x/y) and sizes (width/height) of the element (div) I crop the screenshot. This works fine for me on non-retina displays. But not so on a Macbook with Retina display. For example, on www.247activemedia.com, we want to capture the header div with the logo (id="header"). On non-retina result is: On a Macbook with Retina display:

IOS之支持高分辨率的显示屏(译文)

阅读更多关于 IOS之支持高分辨率的显示屏(译文)

基于IOS SDK 4.0及以后版本的应用程序需要能够在不同分辨率的设备下运行。IOS以一种简单的方式可以支持多分辨率屏幕的情况。大部分处理不同类型屏幕的工作已经由系统框架处理。但应用程序本身也需要做些工作来修正位图图片，如果应用本身要利用像素,也需要做额外的工作。支持高分辨率显示屏的清单为了适应具有高分辨率显示屏的设备，需要做如下几项：在应用程序包中，为每个图片资源提供高分辨的图片为应用和文档图标提供高分辨率的图片基于矢量的图形和内容，要如以前一样继续使用Core Graphics和UIKit的drawing代码直接使用Core Animation图层时，在绘画之前可能需要调整比例系数（scale factor）使用OpenGL ES进行绘画，要判断是否需要加入高分辨率绘画支持，要合理的设置图层的比例系数对于创建的自定义图片，需要更新创建图片的代码，要考虑比例系数的影响如果应用中直接提供了Core Animation图层的内容，要按需要调整代码无偿得到的绘画优化 IOS中的绘画技术提供了强大的支持，帮助开发者以最佳的方式渲染绘画内容，而不管当前显示屏所处的是何种分辨率。标准的UIKit views(text views , buttons , table views , 等等)在任何分辨率下会保证正确的渲染基于矢量的内容( UIBezierPath ,

学习整理与细化（2）——HTML VS XHTML

阅读更多关于学习整理与细化（2）——HTML VS XHTML

<html> <head>//文档头 <title>webpage title</title> </head> <body>//文档体 webpage content </body> </html> 以上是HTML的文档基本结构 <DOCTYPE html>//声明文档类型 <html lang="en"> <head>//文档头 <meta charset="UTF-8"> <title>webage title</title> </head> <body>//文档体 weboage content </body> </html> 以上是XHTML的文档基本结构二、XHTML（表示一开始看完后就直接用XHTML写代码） 1）XHTML的声明文档类型 ①格式： <!DOCTYPE element-name DTD-type DTD-name DTD-url> 其中：!DOCTYPE 表示开始声明DTD，必须为大写；　　　　element-name 指定DTD的根元素名称（如，XHTML表示图XHTML为根控制标记；　　　　DTD-type 有两个值：PUBLIC(公用）|STSTEM（私人）；　　　　DTD-name 有三个值用来指定DTD的文件名称：　　　　　　　　　　　　　　　　　　　　 1."-//W3C//DTD XHTML 1.0 Transitional/

如何实现html5页面,自动提示添加到主屏幕

阅读更多关于如何实现html5页面,自动提示添加到主屏幕

虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。添加图标到主屏幕是Web App的第一步： <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon-72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon-114.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon-144.png"> 添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，区别就在于是否会应用iOS中自动给图标添加的那层高光。由于iPhone以及iPad都有两种分辨率的设备存在，图标的尺寸就需要做4个：144×144(iPad Retina)、72

移动端视网膜（Retina）屏幕下1px边框线解决方案

阅读更多关于移动端视网膜（Retina）屏幕下1px边框线解决方案

原因：因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px。但在IOS8中，已经支持0.5px了，那就意味着, 在devicePixelRatio=2的时候，我们可以使用如下的css： div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } } 但在ios7以下，android等其他系统里，0.5px会被显示为0px，所以需要写hack来兼容旧版本的系统。有两种方案： 1、JS判断浏览器版本，是否是IOS8+，是的话则加上hairlines的类名，加在head里即可。 CSS代码： div{ border:1px solid #000 } .hairlines div{ border-width:0.5px } JS代码： if (window.devicePixelRatio && devicePixelRatio >= 2) { document.querySelector('body').classList.add('hairlines') } 　　 2、JS判断是否支持0.5px的边框，是的话，则加上hairlines的类名。

need to fix retina sprite css issue

阅读更多关于 need to fix retina sprite css issue

问题 I'm trying to optimize the mobile skin for www.talkjesus.com to be retina clear. I accomplished this with standalone images such as the facebook/twitter icons, the logo and the top right 3 icons in the header as well. Problem I'm having is doing this for the sprite image entirely. This is the css code (default) .ui-icon, .ui-icon-searchfield:after { background-image: url({vb:stylevar imgdir_mobile}/metro-icons-24.png); border-radius: 0; background-color: transparent; } .ui-icon-plus

Image processing (segmentation) in matlab

阅读更多关于 Image processing (segmentation) in matlab

问题 How can I detect optic cup and disc from retinal image using matlab ? I want to find out the measurement of optic rim ( distance between optic cup and optic disc ) I have tried the following code RGB = imread('img/A(4).jpg'); G = DialateBloodVessel(RGB); [BW,H] = RGBThresh(G,220,60); H = H(:,:,3); I = edge(H,'Roberts',0.1); imshowpair(I,G); %%%%%%%%%% DialateBloodVessel( RGB ) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% function [ RemovedBV ] = DialateBloodVessel( RGB ) %UNTITLED3 Summary of this

Output img.currentSrc of srcset using jQuery

阅读更多关于 Output img.currentSrc of srcset using jQuery

问题 I need to output the current source of an image using a jQuery alert: alert($('.someclass img').attr('currentSrc')); ...however the alert is outputting undefined. For reference, the mark-up is as follows: <div class="someclass"> <img srcset="http://example.com/A.png, http://example.com/A@2x.png 2x"> </div> 回答1: currentSrc is a property not an attribute. Use .prop('currentSrc') $(function() { console.log($("img").prop("currentSrc")); }); <script src="https://ajax.googleapis.com/ajax/libs

adding @2x to src above certain resolution on none retina devices

阅读更多关于 adding @2x to src above certain resolution on none retina devices

问题 I use retinaJS on my site to serve @2x images on retina devices. I would also like to be able to use jQuery to server @2x images on none retina - large screen desktop devices. So if the screen resolution is above 1330px then I want to be able to add @2x to the end of the filename directly before the file suffix/extension. Can someone suggest how I might do this? My theory was to find all images within a target DIV (e.g. .bodycontent) and then count back 4 characters from the attribute src and

meta标签的一些设置说明

阅读更多关于 meta标签的一些设置说明

<head>  <meta charset='utf-8'>  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>  <meta name="description" content="不超过150个字符"/>  <meta name="keywords" content=""/>  <meta name="author" content="name, email@gmail.com"/>  <meta name="robots" content="index,follow"/>  <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios

订阅 retina