<canvas></canvas>

function imageClip(filter){    var canvas = document.querySelector(‘canvas‘),        context = canvas.getContext(‘2d‘),        img = new Image(), // 图片对象        finish; // 执行成功函数    img.src = ‘http://www.jcore.cn/resources/images/2014/09/20/html5-series-clip-pic-0.png‘; // 设置图片    img.onload = function(e) // 加载图片完成    {        var imgw = img.width,  // 图片宽            imgh = img.height, // 图片高            offsetX = canvas.offsetLeft, // 距离左边位置            offsetY = canvas.offsetTop, //  距离上边位置            mousedown = false; // 是否点击        // 设置 canvas 宽、高、背景        canvas.width  = imgw;        canvas.height = imgh;        canvas.style.backgroundImage = ‘url(‘+img.src+‘)‘;        // 设置模糊 颜色、透明度        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; // 设置为点击事件        }        // 抬起鼠标事件        function eventUp(e){            e.preventDefault(); // 阻止冒泡            mousedown = false; // 设置为是否鼠标点击事件            clearMask(); // 清空模糊层        }        // 清空模糊层函数        function clearMask(){            var num = 0, // 计数器                datas = context.getImageData(0,0,imgw,imgh), // 噪点对象                datasLength = datas.data.length; // 噪点数量            for (var i = 0; i < datasLength; i++) {                if (datas.data[i] == 0) num++; // 为0则已经清空，计数器++            }            if (num >= datasLength * filter) { // 噪点清空数量大于当前百分比                if(finish) finish(); // 执行成功函数            };        }        // 移动鼠标事件        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;    }}

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