html:

<canvas></canvas>

javascript部分：

    function imageClip(filter){var canvas = document.querySelector('canvas'),
        context = canvas.getContext('2d'),
        img = new Image(), // 圖片對象
        finish; // 執(zhí)行成功函數(shù)

    img.src = 'http://www.jcore.cn/resources/images/2014/09/20/html5-series-clip-pic-0.png'; // 設(shè)置圖片
    img.onload = function(e) // 加載圖片完成
    {
        var imgw = img.width,  // 圖片寬
            imgh = img.height, // 圖片高
            offsetX = canvas.offsetLeft, // 距離左邊位置
            offsetY = canvas.offsetTop, //  距離上邊位置
            mousedown = false; // 是否點擊

        // 設(shè)置 canvas 寬、高、背景
        canvas.width  = imgw;
        canvas.height = imgh;
        canvas.style.backgroundImage = 'url('+img.src+')';

        // 設(shè)置模糊 顏色、透明度
        context.fillStyle = 'gray';
        context.globalAlpha = 0.6;

        // 繪制圖片
        context.fillRect(0,0,imgw,imgh);

        // 模糊層繪制到 canvas 上
        context.globalCompositeOperation = 'destination-out';

        // 按下鼠標事件
        function eventDown(e){
            e.preventDefault(); // 阻止冒泡
            mousedown = true; // 設(shè)置為點擊事件
        }

        // 抬起鼠標事件
        function eventUp(e){
            e.preventDefault(); // 阻止冒泡
            mousedown = false; // 設(shè)置為是否鼠標點擊事件
            clearMask(); // 清空模糊層
        }

        // 清空模糊層函數(shù)
        function clearMask(){
            var num = 0, // 計數(shù)器
                datas = context.getImageData(0,0,imgw,imgh), // 噪點對象
                datasLength = datas.data.length; // 噪點數(shù)量
            for (var i = 0; i < datasLength; i++) {
                if (datas.data[i] == 0) num++; // 為0則已經(jīng)清空，計數(shù)器++
            }
            if (num >= datasLength * filter) { // 噪點清空數(shù)量大于當(dāng)前百分比
                if(finish) finish(); // 執(zhí)行成功函數(shù)
            };
        }

        // 移動鼠標事件
        function eventMove(e){
            e.preventDefault(); // 阻止冒泡
            if(mousedown) {
                if(e.changedTouches){ // 手機事件
                    e = e.changedTouches[e.changedTouches.length-1];
                }
                var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0, // X軸坐標
                    y = (e.clientY + document.body.scrollTop  || e.pageY) - offsetY || 0; // Y軸坐標

                // 清空模糊層
                context.beginPath();
                context.arc(x, y, 30, 0, Math.PI * 2); // 畫圓
                context.fill();
            }
        }

        // 綁定手機事件
        canvas.addEventListener('touchstart', eventDown);
        canvas.addEventListener('touchend', eventUp);
        canvas.addEventListener('touchmove', eventMove);
        // 綁定瀏覽器事件
        canvas.addEventListener('mousedown', eventDown);
        canvas.addEventListener('mouseup', eventUp);
        canvas.addEventListener('mousemove', eventMove);
    };

    this.finish = function(callback){
        finish = callback;
    }
}

調(diào)用方法：

var clip = new imageClip(0.1);
clip.finish(function(){
alert("clip success...");
});