Inspired by facebook.com/celebratepride - a super-lightweight library (< 100 lines of code) to “prideify” any image using the <canvas>
element. Licensed under MIT.
There are no external dependencies, although it does integrate with jQuery when it's present
The library does its magic using the <canvas>
API - no trickery with CSS semi-transparent <div>
s or anything like that 😄. After being processed, the image is turned back to a normal <img>
element.
<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
<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>
If you call Prideify without any arguments, any image with the data-prideify
attribute set will be processed:
<img src="/jenny.jpg" data-pridefied />
<script>
Prideify()
</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:
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:
Prideify('#jenny', {
afterRender: function (image) {
console.log('Image rendered')
}
})
The first argument passed to Prideify can be a selector, image element, array of elements or jQuery collection:
Prideify('img.profile-pic')
Prideify($('img.profile-pic'))
Prideify(document.getElementById('jenny'))
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.
If you need to use the plugin with an external image, you'll have to load the image via a CORS proxy, see https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141.
Pridefy([target] [, options]);
- Type:
Element
,Array[Element]
, jQuery collection orString
(selector) - Default:
'[date-prideify]'
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 will be targeted (e.g. it defaults to the CSS selector '[data-prideify]').
- Type:
Object
Configurations options to customize the rendering of the image (see below).
- Type:
String
- Default:
'prideified'
A class that will be added the the <img>
element after the image has been rendered successfully.
- Type:
Array[Array(Number, Number, Number)]
- Default:
undefined
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:
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!
- Type:
Function
- Default:
undefined
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.