随笔-57  评论-129  文章-0  trackbacks-0
最近在搞JSI 的重构,少来冒泡了。
发一个中午的刚用到的小技巧:

在关机效果实现上,现在一般根据浏览器特征分别使用 虑镜/样式/图片 去模拟。

其中Opera是不支持网页透明的,只能用png的alpha透明模拟。
所以,我们需要一张特别的小图片。一个象素,alpha透明。

但是这个单象素图片的出现,感觉有点怪怪的,而且当网速很慢的时候,装载这个小图片还会延迟,效果不好。

不过,Opera的另外一个特性,可以避免这个问题:data:协议的支持。

对于这种小图片,完全可以编码到样式里面

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)


好了,如此一来,关机效果的实现,就没有图片这个累赘了。


图片的生成:

图片的生成,浪费我一个中午的时间:(
开始本想找个软件做掉,最后没发现一个如意的,干脆,自己看看api,自己写了一下:
代码如下:
    public static void main(String[] args) throws IOException {
        BufferedImage image 
= new BufferedImage(11,
                BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d 
= image.createGraphics();
        
// RGBA #cccccc80
        g2d.setColor(new Color(0xcc0xcc0xcc0x80));
        g2d.fillRect(
0011);
        g2d.dispose();
        IIOImage iioImage 
= new IIOImage(image, nullnull);
        ImageTypeSpecifier type 
= ImageTypeSpecifier
                .createFromRenderedImage(image);
        ImageWriter writer 
= (ImageWriter) ImageIO.getImageWriters(type, "png")
                .next();
        ByteArrayOutputStream out 
= new ByteArrayOutputStream();
        writer.setOutput(ImageIO.createImageOutputStream(out));
        writer.write(
null, iioImage, null);
        BASE64Encoder encoder 
= new BASE64Encoder();
        String result 
= encoder.encode(out.toByteArray()).replaceAll("[\r\n]",
                
"");
        System.out.println(
"data:image/png;base64," + result);
    }


需要其他颜色,自己修改一下代码即是。
posted on 2007-05-18 15:30 金大为 阅读(1284) 评论(1)  编辑  收藏

评论:
# re: 关于网页上半透明遮罩的优化(关机效果) 2007-06-22 14:43 | 金大为
经测试得:
除ie外,浏览器基本都支持png Alpha透明及data协议,所以,这种遮罩代码可以简化为:
if(BrowserInfo.isIE()){
masker.style.background = "#CCCCCC";
masker.style.filter = "Alpha(opacity=50)";
//}else if(BrowserInfo.isGecko()){
// masker.style.background = "#CCCCCC";
// masker.style.MozOpacity = 0.5;
//}else if(BrowserInfo.isKhtml()){//support png alpha?? need test..yes support
// masker.style.background = "#CCCCCC";
// masker.style.KhtmlOpacity = 0.5;
//}else if(BrowserInfo.isOpera(9)){
// masker.style.opacity = 0.5;
}else{
//masker.style.background = "#CCCCCC";
masker.style.backgroundImage = "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mM4ffp0AwAHqALiYeNxSgAAAABJRU5ErkJggg==)";
}  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: