简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件。该插件的灵感来自于美国肖像画家Chuck Close。已经有人使用这个js插件来制作了一个完整的图片马赛克应用框架：The Pixelator。使用方法这个马赛克效果js插件需要使用同源的图片，根据 HTML5 规范，浏览器在解析getImageData()方法时会阻止获取跨浏览器的图片。该canvas插件的html结构非常简单，就是使用一个![]()
标签：
然后可以使用下面的方法调用插件：function init() { document.getElementById('portrait-image').closePixelate([ { resolution : 24 }, { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 } ]);};window.addEventListener( 'load', init, false); 你可以使用一个可用参数数组中来控制输出的马赛克效果。参数数组中每一个集合都是一个对象，代表了某种马赛克输出效果。在上面的例子中，第一组参数{ resolution : 24 }控制脚本每24像素就画一个大的正方形像素，然后为每一个正方形像素的中心填充一个精确的颜色值。第二组参数使用了所有的可用参数：{ shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }。和第一组参数一样，它的分辨率是24px，像素的形状是圆形，每一个圆形的大小是16像素，每一个圆形的右边都有12像素的偏移量，最后这个圆形的透明度被设置为50%。可用参数resolution ：被渲染像素之间的距离。必须设定。shape ：像素的形状。可选值：square、circle 和 diamond，默认值：square。可选。size ：渲染像素的大小。可选。默认值为resolution。offset ：像素之间的偏移值。可选，默认值为0.可以只设置一个值，这时为对角偏移。也可以设置为一个数组或对象：[ 15, 5 ]或{ x: 15, y: 5 }。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 optionsvar myPixelation = new ClosePixelation( img, [ { resolution : 24 }]);// re-render the canvas with different optionsmyPixelation.render([ { resolution: 32 }, { resolution: 16, shape: 'circle', offset: 8 }]);// render a single option-set on topmyPixelation.renderClosePixels({ resolution: 48, alpha: 0.5}); 应用举例html5 canvas图片马赛克效果-1{ shape : 'diamond', resolution : 48, size: 50 },{ shape : 'diamond', resolution : 48, offset : 24 },{ shape : 'circle', resolution : 8, size: 6 } html5 canvas图片马赛克效果-2{ resolution: 32 },{ shape : 'circle', resolution : 32, offset: 15 },{ shape : 'circle', resolution : 32, size: 26, offset: 13 },{ shape : 'circle', resolution : 32, size: 18, offset: 10 },{ shape : 'circle', resolution : 32, size: 12, offset: 8 } html5 canvas图片马赛克效果-3{ resolution: 48 },{ shape: 'diamond', resolution: 48, offset: 12, alpha: 0.5 },{ shape: 'diamond', resolution: 48, offset: 36, alpha: 0.5 },{ shape: 'circle', resolution: 16, size: 8, offset: 4, alpha: 0.5 } html5 canvas图片马赛克效果-4{ shape: 'circle', resolution: 32, size: 6, offset: 8 },{ shape: 'circle', resolution: 32, size: 9, offset: 16 },{ shape: 'circle', resolution: 32, size: 12, offset: 24 },{ shape: 'circle', resolution: 32, size: 9, offset: 0 } html5 canvas图片马赛克效果-5{ shape: 'diamond', resolution: 24, size: 25 },{ shape: 'diamond', resolution: 24, offset: 12 },{ resolution: 24, alpha: 0.5 } html5 canvas图片马赛克效果-6{ shape: 'square', resolution: 32 },{ shape: 'circle', resolution: 32, offset: 16 },{ shape: 'circle', resolution: 32, offset: 0, alpha: 0.5 },{ shape: 'circle', resolution: 16, size: 9, offset: 0, alpha: 0.5 } html5 canvas图片马赛克效果-7{ shape : 'circle', resolution : 24 },{ shape : 'circle', resolution : 24, size: 9, offset: 12 } html5 canvas图片马赛克效果-8{ shape : 'square', resolution : 48, offset: 24 },{ shape : 'circle', resolution : 48, offset : 0 },{ shape : 'diamond', resolution : 16, size: 15, offset : 0, alpha : 0.6 },{ shape : 'diamond', resolution : 16, size: 15, offset : 8, alpha : 0.6 } html5 canvas图片马赛克效果-9{ shape : 'square', resolution : 48 },{ shape : 'diamond', resolution : 12, size: 8 },{ shape : 'diamond', resolution : 12, size: 8, offset : 6 } 本文地址：