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

当前位置:主页 > Html5库 > html5 canvas > HTML5 canvas炫酷彩虹条纹图片特效
HTML5 canvas炫酷彩虹条纹图片特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-02
    阅读:
简要教程

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。由于安全的原因,跨域图片不能被转换为彩虹图片效果。设置crossOriginProxytrue可以通过http://crossorigin.me代理来加载图片,使跨域图片变为可用。
  • customStripes:默认值undefined,类型Array of arrays。如果你不想使用默认的颜色,你可以设置一个customStripes颜色数组。它是一个嵌套数组,里面的每一个数组是一个RGB颜色。
    Prideify('.profile-pic', { 
      customStripes: [[0, 0, 0], [255, 255, 255]] 
    });
    
  • afterRender:默认值undefined,类型Function。在图片被渲染之后的回调函数。新图片会作为参数被传入。