浙江 杭州

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

系统分类: 网页特效 - html5 - html5模板 2015-09-19

人气9104

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


                                       这是一款使用HTML canvas来将图片制作成马赛克效果的js插件。该马赛克插件可以使用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 : 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 :像素的形状。可选值:squarecirclediamond,默认值: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 options
var myPixelation = new ClosePixelation( img, [
  { resolution : 24 }
]);
// re-render the canvas with different options
myPixelation.render([
  { resolution: 32 },
  { resolution: 16, shape: 'circle', offset: 8 }
]);
// render a single option-set on top
myPixelation.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 }

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:128.65KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1125.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5 canvas生成图片马赛克特效插件

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)