实用收藏

一.AlloyImage

官网：http://alloyteam.github.io/AlloyPhoto/
简介：基于html5技术的JS图像处理库，包括一些方便快捷的图像处理API

在静态网页中报错，无法实现效果，所以放服务器上运行。

demo1：

    ![](683.jpg)
    ![](687.jpg)<hr>
    ![](683.jpg)
    ![](687.jpg)
    <script src="alloyimage-1.1.js"></script>
    <script>
        var img1=document.getElementsByTagName("img")[2];
        img1.onload=function(){
            var Alloy1=AlloyImage(this);
            Alloy1.act("mosaic",10).replace(this)
        }
        var img2=document.getElementsByTagName("img")[3];
        img2.onload=function(){
            var Alloy2=AlloyImage(this);
            Alloy2.act("灰度处理").replace(this)
        }
    </script>

image.png

demo2：

鼠标移进加一层绿色蒙版，移出恢复初始效果。先克隆一个初始的，再克隆一个叠加的绿的图层

var imgs=document.getElementsByTagName("img");
        for(var i=0,len=imgs.length;i<len;i++){
            imgs[i].loadOnce(function(){
                var ai=AlloyImage(this);
                var init=ai.clone();
                var hoverImg=ai.add(
                    AlloyImage(300,300,"#0f0"),"正常","20%"
                ).clone();

                this.onmouseover=function(){
                    hoverImg.replace(this)
                }
                this.onmouseout=function(){
                    init.replace(this)
                }
            })
        }

image.png