AJAX based Air 是由Safari Webkit驱动的,这也就意味着,Air的浏览器特性支持是Safari是一致的,于是图片的灰度化grayscale就没有什么很好的实现方法,原生的CSS3解决不了这个问题,普通浏览器是使用css的filter来实现的,不过Safari不支持。于是,可以想见这样几个解决方案。
动态计算 将img的src赋值为data()这种形式,data中是需要显示的整个灰度图的像素值。这些像素值可以通过比较简单的算法得到,获取原始图片像素后,将r,g,b加在一起除3,得到平均值,再赋值给r,g,b。 不过,这个方法遭遇了跨域问题,因为图片存储在了本地的applicationStorageDirectory,而不是程序目录中。于是在获取图片像素的时候,抛出了异常。
设计样式 因为尝试了css和data这两种方式都失败了,所以我提出了最后一个以防万一的方案,就是将图片的右下角增加一个方块,来标示图片已经变灰,类似于微博和校内中,联系人已经离线的样式。
存储两张图片 思考了一段时间之后,决定将图片存储成两张,在图片需要变灰时,将其显示成已经存储的灰度化的图。 存储灰度化图片的时候,发现Ajax Based Air提供的Api中居然没有类似于PNGEncoder的函数。这个问题的解决思路其实很简单,只要去调用一下flex中的PNGEncoder就行了。具体在这里。