HTML5 canvas生成图片马赛克特效插件

HTML5 canvas生成图片马赛克特效插件

简要教程
这是一款使用html5 canvas来将图片制作成马赛克效果的js插件。该插件的灵感来自于美国肖像画家Chuck Close。已经有人使用这个js插件来制作了一个完整的图片马赛克应用框架：The Pixelator。
使用方法
这个马赛克效果js插件需要使用同源的图片，根据 HTML5 规范，浏览器在解析getImageData()方法时会阻止获取跨浏览器的图片。
该canvas插件的html结构非常简单，就是使用一个<img>标签：
<img id="portrait-image" src="img/portrait.jpg" />

然后可以使用下面的方法调用插件：
function init() {
  document.getElementById('portrait-image').closePixelate([
    { resolution :  },
    { shape : 'circle', resolution : , size: , offset: , alpha: 0.5 }
  ]);
};
window.addEventListener( 'load', init, false);

你可以使用一个可用参数数组中来控制输出的马赛克效果。参数数组中每一个集合都是一个对象，代表了某种马赛克输出效果。
在上面的例子中，第一组参数{ resolution :  }控制脚本每24像素就画一个大的正方形像素，然后为每一个正方形像素的中心填充一个精确的颜色值。
第二组参数使用了所有的可用参数：{ shape : 'circle', resolution : , size: , offset: , alpha: 0.5 }。和第一组参数一样，它的分辨率是24px，像素的形状是圆形，每一个圆形的大小是16像素，每一个圆形的右边都有12像素的偏移量，最后这个圆形的透明度被设置为50%。
可用参数
resolution ：被渲染像素之间的距离。必须设定。
shape ：像素的形状。可选值：square、circle 和 diamond，默认值：square。可选。
size ：渲染像素的大小。可选。默认值为resolution。
offset ：像素之间的偏移值。可选，默认值为0.可以只设置一个值，这时为对角偏移。也可以设置为一个数组或对象：[ ,  ]或{ x: , y:  }。
alpha ：渲染像素的透明度，可选，默认值为1。
构造函数和方法
var img = document.getElementById('portrait-img');
// create a new Close Pixelation instance with ClosePixelation
// requires two arguments: the original image element
// and an array of options
var myPixelation = new ClosePixelation( img, [
  { resolution :  }
]);
// re-render the canvas with different options
myPixelation.render([
  { resolution:  },
  { resolution: , shape: 'circle', offset:  }
]);
// render a single option-set on top
myPixelation.renderClosePixels({
  resolution: , alpha: 0.5
});

应用举例
html5 canvas图片马赛克效果-
{ shape : 'diamond', resolution : , size:  },
{ shape : 'diamond', resolution : , offset :  },
{ shape : 'circle', resolution : , size:  }

html5 canvas图片马赛克效果-
{ resolution:  },
{ shape : 'circle', resolution : , offset:  },
{ shape : 'circle', resolution : , size: , offset:  },
{ shape : 'circle', resolution : , size: , offset:  },
{ shape : 'circle', resolution : , size: , offset:  }

html5 canvas图片马赛克效果-
{ resolution:  },
{ shape: 'diamond', resolution: , offset: , alpha: 0.5  },
{ shape: 'diamond', resolution: , offset: , alpha: 0.5  },
{ shape: 'circle', resolution: , size: , offset: , alpha: 0.5 }

html5 canvas图片马赛克效果-
{ shape: 'circle', resolution: , size: , offset:  },
{ shape: 'circle', resolution: , size: , offset:  },
{ shape: 'circle', resolution: , size: , offset:  },
{ shape: 'circle', resolution: , size: , offset:  }

html5 canvas图片马赛克效果-
{ shape: 'diamond', resolution: , size:  },
{ shape: 'diamond', resolution: , offset:  },
{ resolution: , alpha: 0.5 }

html5 canvas图片马赛克效果-
{ shape: 'square', resolution:  },
{ shape: 'circle', resolution: , offset:  },
{ shape: 'circle', resolution: , offset: , alpha: 0.5 },
{ shape: 'circle', resolution: , size: , offset: , alpha: 0.5 }

html5 canvas图片马赛克效果-
{ shape : 'circle', resolution :  },
{ shape : 'circle', resolution : , size: , offset:  }

html5 canvas图片马赛克效果-
{ shape : 'square', resolution : , offset:  },
{ shape : 'circle', resolution : , offset :  },
{ shape : 'diamond', resolution : , size: , offset : , alpha : 0.6 },
{ shape : 'diamond', resolution : , size: , offset : , alpha : 0.6 }

html5 canvas图片马赛克效果-
{ shape : 'square', resolution :  },
{ shape : 'diamond', resolution : , size:  },
{ shape : 'diamond', resolution : , size: , offset :  }

本文地址：http://www.htmleaf.com/html5/html5-canvas/201502021314.html