HTML5 canvas炫酷彩虹条纹图片特效

prideify是一款可以使用HTML5 canvas来将任何图片转换为炫酷的彩虹条纹效果的图片特效js插件。该图片特效基于canvas API制作，没有任何外部依赖，整个文件大小不到100行代码。当然也可以和jQuery配合使用。

使用方法

纯js调用

该彩虹条纹图片特效的基本使用方法如下：

<img src='/dave.jpg' class='profile-pic'>
<img src='/jenny.jpg' class='profile-pic'>               
              

<script src='prideify.js'></script>
<script>
  Prideify('.profile-pic');
</script>                
              

通过jQuery调用

你也可以通过jQuery来抵用该图片特效。

<img src='/dave.jpg' class='profile-pic'>
<img src='/jenny.jpg' class='profile-pic'>

<script src='jquery.js'></script>
<script src='prideify.js'></script>
<script>
  $('.profile-pic').prideify();
</script>             
              

$( function() {
    $( '#gallery' ).jGallery();
} );                
              

配置参数

Pridefy(target, [options]);                
              

• target (optional)：默认值'[date-prideify]'。你想要转换的图片或图片集合。你可以传入一个选择器，任何匹配选择器的元素都会被转换。如果不填写该参数，任何带data-prideify参数的图片都会被转换。
• options (optional)：默认值{}。附加的配置选项。看下面的配置参数。

该彩虹图片特效的可用配置参数如下：

• renderedClass：默认值'prideified'，类型：String。在图片被渲染为彩虹条纹图片之后添加到<img>元素上的class。
• crossOriginProxy：默认值false，类型：Boolean或String。由于安全的原因，跨域图片不能被转换为彩虹图片效果。设置crossOriginProxy为true可以通过http://crossorigin.me代理来加载图片，使跨域图片变为可用。
• customStripes：默认值undefined，类型Array of arrays。如果你不想使用默认的颜色，你可以设置一个customStripes颜色数组。它是一个嵌套数组，里面的每一个数组是一个RGB颜色。

  Prideify('.profile-pic', { 
    customStripes: [[0, 0, 0], [255, 255, 255]] 
  });
  

• afterRender：默认值undefined，类型Function。在图片被渲染之后的回调函数。新图片会作为参数被传入。