一.AlloyImage

官網(wǎng)：http://alloyteam.github.io/AlloyPhoto/
簡介：基于html5技術(shù)的JS圖像處理庫，包括一些方便快捷的圖像處理API

在靜態(tài)網(wǎng)頁中報錯，無法實現(xiàn)效果，所以放服務(wù)器上運(yùn)行。

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：

鼠標(biāo)移進(jìn)加一層綠色蒙版，移出恢復(fù)初始效果。先克隆一個初始的，再克隆一個疊加的綠的圖層

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