Android中按图片像素缩放图片的一种方法。通过这种方式，可以按像素缩放图片，巧妙避免加载大图可能发生OOM的情况。 

try { 

            BitmapFactory.Options options = new BitmapFactory.Options(); 

            options.inJustDecodeBounds = true;//设置true后，位图并没有真正加载到内容，仅仅获取所必要的参数 

            mBitmap = BitmapFactory.decodeFile(path,options);//path为文件路径 

            options.inJustDecodeBounds = false; 

           int be = (int)(options.outHeight/ (float)200);//设置打开图片高度为200像素 

            if (be <= 0) 

                be = 1; 

            options.inSampleSize = be;  

        mDstBmp= BitmapFactory.decodeFile(path,options);
       options.inJustDecodeBounds = false;//真正将图片加载到内存 

    } catch (Exception e) {  
        Toast.makeText(getApplicationContext(), "图片打开错误",  
                Toast.LENGTH_SHORT).show();  
    }  

很久没发文章啦，
昨天在开发的时候遇到了这样一个问题，后来翻阅找到了这样一种解释，先举个栗子：
iphone4 的dpr 公认的是1.0 我们在CSS上面设置1px，然后其在屏幕上呈现结果就是1px。而iphone5的dpr是2.0，所以我们在开发的时候在CSS里面设置了1px的时候就是会放大2倍，所以1个csspx会用1*2的平方即4个设备像素来展示(记住X，Y两个方向都是放大2倍的，本来一个像素点的显示就被放大到四个像素点来显示了。    但是！！！css 中的 px 不是物理像素. css px 和物理像素的对应关系, 他是与 viewport 的缩放有关.在理想 viewport 下, dpr
 就是 css px 与物理像素的比例, 因而可以推导出在其他缩放比例下 css px 与物理像素的换算关系了. 例如在 scale=1/dpr 缩放下, css px 与物理像素一一应在现代的工作流程中, 设计师和程序员都不需要 (太) 关注物理像素.

移动端基础
物理像素  像素点
移动端设备的屏幕都是由一个个点组成的，每个屏幕上的点一定是有限的，现在技术还做不到无限个点，这些点可以叫做像素，或者叫物理像素。
分辨率
每一个长度方向上的像素个数乘以每一个宽度方向上的像素个数的表达形式是分辨率。
屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细
1px是否=一个物理像素
在早期的屏幕也就是普通屏、标清屏中1css像素 = 1个物理像素
随着Retina（视网膜屏）等技术兴起，能够将更多的物理像素点压缩到一块屏幕中，从而达到更高的分辨率，提升屏幕显示的细腻度。
分辨率：4 * 2（横向上两个像素点，纵向上4个像素点）

分辨率：8 * 4 （横向上4个像素点，纵向上8个像素点）
逻辑像素
逻辑像素也叫css像素、设备独立像素，可以理解为是在css里的像素点，也就是说css像素是逻辑像素的一种。

css像素的单位也叫PX，是图像显示的基本单元。

css像素 = 设备独立像素 = 逻辑像素
开发中使用的像素
.box{
	width: 2px;
	height: 2px;
}

总结：

在标清屏下，1个逻辑像素，使用一个物理像素表示，所以盒子中使用2 * 2个物理像素是表示。

在高清屏下，1个逻辑像素，使用两个物理像素表示，所以盒子最终使用4 * 4个物理像素表示。

整体来说，表示同样的一个盒子，高清屏使用的物理像素是标清屏的4倍

如果从一个方向上来说，高清屏使用的物理像素是标清屏的2倍（这也是后面说到的2倍图的由来）

css 代码在浏览中运行时，浏览器根据当前设备屏幕情况，自己选择到底使用几个物理像素表示1个逻辑像素，不需要开发者参与。
设备像素比
dpr: device pixel ratio

dpr = 设备像素/css像素

表示一个设备的物理像素与逻辑像素的比，只考虑一个方向
缩放
物理像素是不能改变大小的，缩放改变的是1css像素等于多少个物理像素，就是改变一个css像素需要多少个物理像素表示。
放大
原：一个方向上 一个css像素等于一个物理像素

放大二倍后：一个方向上一个css像素等于两个物理像素
缩小
原：一个方向上 一个css像素等于一个物理像素

缩小二倍后：一个方向上一个css像素等于二分之一个物理像素
ppi
简称：ppi

全名：dots per inch

ppi表示的是每英寸所拥有的像素数目，即在一个对角线长度为1英寸的正方形内所拥有的物理像素数。像素色块越小或者分辨率越高则ppi越大。

视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口  layout viewport.
为了在手机上也能够显示这些为pc端专门设置的页面，出现了布局视口的概念。
布局视口的宽度一般为980，也有1024的，
视觉适口  visual viewport
就是用户正在看到的网站的区域
理想视口  ideal viewport
布局视口>视觉视口，所以会在视觉视口中出现横向滚动条，用户体验效果很差。
理想视口，对设备来讲，是最理想的视口尺寸，为了使网站在移动端有最理想的浏览和阅读宽度而设定
需要设置 meta 标签进行设置
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口
meta标签（理想视口的设定）
通常在写移动端页面的时候，我们都会设置viewport，保证页面缩放没有问题。
参数：

device-width设备宽度、initial-scale初始缩放比、minimum-scale允许用户缩放到的最小比例、maximum-scale允许用户缩放到的最大比例、user-scalable用户是否可以手动缩放 (no/yes)
meta元标签分两大部分：HTTP 标题信息（http-equiv）和页面描述信息（name）
HTTP 标题信息（http-equiv）
http-equiv 属性的 Content-Type 值（显示字符集的设定）
说明：设定页面使用的字符集，用以说明主页制作所使用的文字语言，浏览器会根据此来调用相应的字符集显示 page 内容。

语法：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ，就是万国码。它可以在同一页面显示中文简体、繁体及其它语言（如日文，韩文）等

设置编码格式语法：
<meta charset="utf-8">

页面描述信息（name）
提供有关页面的元信息，标签位于文档的头部，不包含任何内容。

还包含页面描述信息（name），主要有以下几个作用：叙述网页关键词、描述页面（设置页面说明）、添加作者信息、设置移动屏幕缩放。
name 属性为viewport 时，主要控制移动屏幕的缩放
name 属性为viewport 可视区域时取值（可以操作的属性有 4 个）：

width – viewport 的宽度 （范围从 200 到 10,000，默认为 980 像素）
height – viewport 的高度 （范围从 223 到 10,000 ）
initial-scale – 初始的缩放比例 （范围从 > 0 到 10）
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放 (no，yes)

移动端开发时常用语法
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

最标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

box-sizing 标签
css 中的 box-sizing 属性定义了user agent 应该如何计算一个元素的总宽度和总高度
box-sizing 属性值:

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。
box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

博客简介
HTML5中的canvas允许我们直接对像素进行操作，我们可以通过ImageData对象操纵像素数据，读取或将数据数组写入该对象中。这里还会介绍如何控制图像使其平滑（反锯齿）以及如何从Canvas画布中保存图像。

imageData对象
读取或写入imageDate对象
缩放和反锯齿
保存图片

ImageData对象
ImageData对象中存储着canvas对象真实的像素数据，包含以下只读属性

iwidth：图片的宽度，单位px
height：图片的高度，单位px
data：Uint8ClampedArray类型的一维数组，包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
data属性返回一个像素数组 Uint8ClampedArray，它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。像素从左到右被处理，然后往下，遍历整个数组。
获取i行j列的R/G/B/A值：

imageData.data[((行数-1)*imageData.width + (列数-1))*4 - 1 + 1/2/3/4];


获取像素数组Uint8ClampedArray的大小：

var numBytes = imageData.data.length;

创建一个ImageData对象
一般的，创建一个ImageData对象，我们可以使用createImageData方法：

var myImageData = ctx.createImageData(width, height)：创建一个新的尺寸为width，height的ImageData对象，所有的像素被预设为黑色透明。
var myImageData = ctx.createImageData(anotherImageData)：创建一个被anotherImageData对象指定的相同像素的ImageData对象。这个新的对象像素全部被预设为透明黑。这个并非复制了图片数据。

var myImageData = ctx.createImageData(width, height);
var myImageData = ctx.createImageData(anotherImageData);

获取场景canvas区域的ImageData对象
我们可以通过getImageData方法获取canvas指定区域的像素数据：

getImageData（x,y,width,height）：返回一个ImageData对象，该对象描述了(x,y,x+width,y+height)区域的像素

举例：取色器
这个例子中，我们将返回鼠标位置的像素：

获取鼠标的位置x，y
获取该位置的ImageData对象
获取对象的数据
将数据返回，并且用该RGBA值绘制颜色

var img=new Image();
window.onload=function()
{
    img.src="spiderMan.jpg";//获取图片
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext('2d');
    img.onload=function()
    {
        ctx.drawImage(img,0,0,400,300);//画出图片
        //获取ImageData对象
        canvas.addEventListener("mousemove",function(e)
        {
            var x=e.layerX;
            var y=e.layerY;//获取坐标
            var imageData=ctx.getImageData(x,y,1,1);//获取x，y处像素1*1的图片
            var data=imageData.data;//获取像素数据
            var r=data[0];
            var g=data[1];
            var b=data[2];
            var a=data[3];
            var color="rgba("+r+","+g+","+b+","+a+")";
            ctx.clearRect(0,305,400,400)
            ctx.save();
            ctx.fillStyle=color;
            ctx.fillRect(0,305,100,40);//绘制矩形
            ctx.font="15px 幼圆";
            ctx.save();
            ctx.fillStyle=" #7B68EE";
            ctx.fillRect(0,375,250,40);
            ctx.restore();
            ctx.fillText("光标处像素="+color,0,400);
            ctx.restore();
        })
    }
}


在场景canvas中写入像素数据
我们通过getImageData方法获取canvas指定区域的像素数据，同时也可以用putImageData()方法将像素写入写入canvas中

putImageData（imageData,x,y）:将ImageData对象代表的图片绘制在x,y位置
直接修改ImageData.data就能够改变ImageData对象

putImageData举例
以下我们将会操纵一张图片像素，取出像素值后，对它进行灰度和反相操作，我们设置两个函数grayscale 和invert 来实现：

grayscale 灰度处理 ：x = 0.299r + 0.587g + 0.114b

function grayscale()//灰度
{
    for(var i=0;i<data.length;i+=4)
    {
        avg=0.299*data[i] + 0.587*data[i+1] + 0.114*data[i+2];
        data[i]=data[i+1]=data[i+2]=avg;
    }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.putImageData(imageData,0,0);
}


invert 反相处理 ：x=255-i

function intervar()//反相
{
    for(var i=0;i<data.length;i+=4)
    {
        data[i]=255-data[i];//r
        data[i+1]=255-data[i+1];//g
        data[i+2]=255-data[i+2];//b
    }
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.putImageData(imageData,0,0);
}

最后添加监听
  var invertbtn = document.getElementById('invertbtn');
  invertbtn.addEventListener('click', intervar);

  var grayscalebtn = document.getElementById('grayscalebtn');
  grayscalebtn.addEventListener('click', grayscale);





缩放和反锯齿
关于canvas操作图像的放缩，我们在前面已经介绍过了，通过drawImage(x,y,w,h)来实现，放缩过程中默认是反锯齿的，如果我们想要去掉反锯齿，看到具体的像素，可以使用imageSmoothingEnabled属性：

imageSmoothingEnabled锯齿：如果为true，则展示反锯齿，为false展示锯齿

缩放和反锯齿举例
var img=new Image();
img.src="../纸飞机.jpg";
var canvas;
var able=1;
img.onload=function()
{
    draw(this);
}
function toggleSmoothing()
{
    able=able?false:true;
    ctx.imageSmoothingEnabled=able;
}
function show(e)
{
    var x=e.layerX;
    var y=e.layerY;//获取坐标
    ctx.clearRect(500,0,200,200);
    ctx.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,500,0,200,200);
}
function draw(img) {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0,480,300);
  img.style.display = 'none';

  var smoothbtn = document.getElementById('smoothbtn');//获取区域
  smoothbtn.addEventListener('click',toggleSmoothing);
  canvas.addEventListener('mousemove',show);
}




保存图片
HTMLCanvasElement  提供一个toDataURL()方法，此方法在保存图片的时候非常有用。它返回一个包含被类型参数规定的图像表现格式的数据链接。返回的图片分辨率是96dpi。

canvas.toDataURL(‘image/png’) ：默认设定。创建一个PNG图片。
canvas.toDataURL(‘image/jpeg’, quality)：创建一个JPG图片。你可以有选择地提供从0到1的品质量，1表示最好品质，0基本不被辨析但有比较小的文件大小。

当你从画布中生成了一个数据链接，例如，你可以将它用于任何< image >元素，或者将它放在一个有download属性的超链接里用于保存到本地
canvas.toBlob(callback, type, encoderOptions)：这个创建了一个在画布中的代表图片的Blob对像。

用超链接保存图片：
我们对以上的图片稍加修改，并且插入超链接
var img=new Image();
img.src="../纸飞机.jpg";
var canvas;
var able=1;
img.onload=function()
{
    draw(this);
}
function toggleSmoothing()
{
    able=able?false:true;
    ctx.imageSmoothingEnabled=able;
}
function show(e)
{
    var x=e.layerX;
    var y=e.layerY;//获取坐标
    ctx.clearRect(500,0,200,200);
    ctx.drawImage(canvas,Math.abs(x-5),Math.abs(y-5),10,10,500,0,200,200);
}
function draw(img) {
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0,480,300);
  img.style.display = 'none';

  var smoothbtn = document.getElementById('smoothbtn');//获取区域
  smoothbtn.addEventListener('click',toggleSmoothing);
  canvas.addEventListener('mousemove',show);
  canvas.addEventListener("click",function(){
    var area=document.getElementsByTagName("a")[0];
    area.setAttribute("href",canvas.toDataURL("纸飞机",1));
  })
}

当图片被点击时，就会生成一个toDataURL对象，点击超链接则会下载图片：





图片下载完成