prideify.js

Inspired by facebook.com/celebratepride - a super-lightweight library (< 100 lines of code) to “prideify” any image using the <canvas> element. Licensed under MIT.

And to boot, there are no external dependencies, although it does integrate with jQuery when it's present 😊.

5 example images of prideify.js in action

Demo

Drag and drop an image here.

Usage

Quickstart

1
2
3
4
5
6
7
<img src='/dave.jpg' class='profile-pic'>
<img src='/jenny.jpg' class='profile-pic'>

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

With jQuery

1
2
3
4
5
6
7
8
<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>

More examples

If you call Prideify without any arguments, any image with the data-prideify attribute set will be processed:

1
2
3
4
<img src='/jenny.jpg' data-pridefied>
<script>
  Prideify();
</script>

If you are trying to call Prideify with an image not hosted on your server, you'll probably need to set the crossOriginProxy option to true, to avoid browser restrictions regarding the canvas element (see more under Configuration options):

1
2
3
4
<img src='http://example.com/jenny.jpg'>
<script>
  Prideify('img', { crossOriginProxy: true });
</script>

By default Prideify will add a CSS class 'prideify' after the image is rendered. You can use a different CSS class by setting the renderedClass option:

1
Prideify('img', { renderedClass: 'some-custom-class' });

If you want something to happen after the image has been rendered, you can use the afterRender option. The newly rendered image will be passed into the callback function:

1
2
3
4
5
6
<img src='http://example.com/jenny.jpg' id='jenny'>
<script>
  Prideify('#jenny', { afterRender: function(image) {
    console.log("Image rendered")
  } });
</script>

The first argument passed to Prideify can be a selector, image element, array of elements or jQuery collection:

1
2
3
Prideify('img.profile-pic');
Prideify($('img.profile-pic'));
Prideify(document.getElementById('jenny'));

Arguments

1
Pridefy(target, [options]);

The image or collection of images you want to prideify. Alternatively you can pass a selector, in which case anything matching the selector will be prideified.

If left blank, all images with data-prideify attributes (e.g. it defaults to the CSS selector '[data-prideify]').

Additional configuration options - see below.

Configuration options

A class that will be added the the <img> element after the image has been rendered successfully.

Due to browser restrictions, you won't be able to use prideify normally with most image that are not hosted on your domain (unless the image host has been kind enough to set Access-Control-Allow-Origin to *). You can learn more about cross-origin security and the <canvas> in this MDN article.

Setting crossOriginProxy to true will load the image via http://crossorigin.me, thereby avoid cross-origin restrictions. If you want to use a different proxy, you can pass its URL as a string.

If you don't want to use the default colors, or want extra or fewer stripes, you can set use a customStripes array. This is a nested array of arrays, each containing the RGB values of each stripe:

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

The above would overlay two stripes - a black one, and a white one - admittedly not very exciting!

A callback function that will run after the image has been rendered. The new image will be passed as the sole argument to the callback function.

Download

Download (.zip)

Todo

Better error handling 😇, bookmarklet, Bower support.

Credits

Thanks to Facebook and the LGBT community for the inspiration and to technoboy10 for the awesome CORS proxy.

Sent into the world with the blessing of Peg!

Rainbow peg