flex中针对Image、Bitmap、BitmapData相互转化

最新推荐文章于 2021-12-24 19:31:16 发布

luckidog

最新推荐文章于 2021-12-24 19:31:16 发布

阅读量1.7k

点赞数

分类专栏： flex

flex 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

flex中针对Image、Bitmap、BitmapData的操作支持非常灵活，简单整理下：

1、设置Image组件的source(指定图片路径)属性引入图片，当图片加载完成后，Image.content即为Bitmap对象实例

2、使用资源类的方式[Embed(source=”sample.png”)]private var myImage:Class的方式引入图片资源。这时 new myImage()获得的即为BitmapAsset类型。

BitmapAsset继承自Bitmap类型，支持其主要的功能方法，可以将该元素赋值给Image.source属性以获得显示

3、 Bitmap.bitmapData属性即存储位图信息的BitmapData对象，BitmapData对象是flex中位图操作的关键，其支持的与二进制数据的转换、像素点操作都为flex的展示提供了强大技术支持。

BitmapData提供一下主要功能：

1、复制获取整个图像，部分图像

使用draw()方法。

注：源显示对象不对此调用使用其任何已应用的转换。它会被视为存在于库或文件中，没有矩阵转换、没有颜色转换，也没有混合模式。要使用对象自己的 transform 属性来绘制显示对象（如影片剪辑），可以将其 transform 属性对象复制到使用 BitmapData 对象的 Bitmap 对象的transform 属性。

2、获取或者改变像素，或者像素组的颜色

使用setPixel(),setPixel32(),getPixel(),getPixel32(),

针对单个像素位进行操作，给一段比较有趣的代码，分解颜色值

var bmd:BitmapData = new BitmapData(80, 40, true, 0xFF44AACC);var pixelValue:uint = bmd.getPixel32(1, 1);
var alphaValue:uint = pixelValue >> 24 & 0xFF;
var red:uint = pixelValue >> 16 & 0xFF;
var green:uint = pixelValue >> 8 & 0xFF;
var blue:uint = pixelValue & 0xFF;trace(alphaValue.toString(16));
// ff
trace(red.toString(16));
// 44
trace(green.toString(16));
// aa
trace(blue.toString(16)); //

3、滤镜使用applyFilter()，在使用该方法之前可以通过generateFilterRect()判断滤镜的应用范围。

4、创建随机的像素（noise或perlin noise）

5、可以把位图转换成byteArray或者Base64存入数据库，并可以转换回来

使用PNGEncoder，JPGEncoder等，或者直接使用getPixels(),setPixels()方法

关于Encoder使用方法一般如下：

/png/jpg类似
var encoder:\\PNGEncoder = new \\PNGEccoder;
var bytes:ByteArray = encoder.encode(bitmapData);
获得的bytes如果想再次转换为bitmapData则需要使用loader类来完成解析。从文件或者数据库读取的图片文件也可以使用下面的方式进行转换
代码如下：
var loader:\\Loader = new \\Loader;
loader.contentLoaderInfo.addEventListener(Event.Complete, loadCompleterHandler);
loader.loadBytes(bytes)
private  function loadCompleterHandler(event:Event):void
{
   var bitdata:BitmapData;
   var loaderInfo:\\LoaderInfo = event.target;
   if(loaderInfo.content is Bitmap)
   {
        bitdata = (loaderInfo.content  as Bitmap).bitmapData;
   }
  else
{
   bitdata = new BitmapData(this.tileSize, this.tileSize);
   bitdata.draw(loaderInfo.content);
}
}

getPixels(),setPixels()方法使用，这两个方法获取指定区域的图片位图信息，可以直接完成从byteArray到bitmapData的转换，但是数据层次没有压缩辅助以ByteArray本身的compress()和uncompress()方法可以在存储时节省一定的内存开销

使用getPixels()获取的byteArray信息也可以使用loader.loadBytes()的方法来解析成BitmapData，但是在知道宽高的情况下其实可以直接使用setPixels()直接写入bitmapData中

Code如下：

var bitmapdatanew:BitmapData = new BitmapData(300,225);
var byteArray:ByteArray = bitmapdata.getPixels( bitmapdata.rect );
byteArray.position = 0
bitmapdatanew.setPixels(new Rectangle(0,0,width,height),byteArray);
var bitmap:Bitmap = new Bitmap(bitmapdatanew);
_img.source = bitmap;
注意:bytearray如果在操作过程中进行过读取和写入操作，会影响其posiition属性，该属性会影响后面的读写操作，因此需要多多注意

压缩和解压缩的代码很简单。直接在获取的ByteArray上调用对应方法即可更改自身。Flash默认支持zlib压缩算法