<<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function imageClip(filter){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d"),
img = new Image(), // 图片对象
finish; // 执行成功函数
img.src = 'http://pic3.zhongsou.com/image/38045b84a72cf7181c1.jpg'; // 设置图片
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.9;
// 绘制图片
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;
}
}
</script>
</head>
<body>
<canvas id="myCanvas" ></canvas>
<script type="text/javascript">
var clip = new imageClip(0.1);
clip.finish(function(){
alert("clip success...");
});
</script>
</body>
</html>
