mirror of
https://codeberg.org/streams/streams.git
synced 2024-09-19 15:55:13 +00:00
remove pixelate - it doesn't really work for what we need
This commit is contained in:
parent
57a2fe9dd6
commit
fa9bef00fe
11 changed files with 0 additions and 1441 deletions
|
@ -1,6 +0,0 @@
|
|||
root = true
|
||||
|
||||
[*.{js,json}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"extends": "eslint:recommended",
|
||||
"env": {
|
||||
"browser": true,
|
||||
"jquery": true
|
||||
}
|
||||
}
|
22
library/pixelate.js/.gitattributes
vendored
22
library/pixelate.js/.gitattributes
vendored
|
@ -1,22 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
||||
# Custom for Visual Studio
|
||||
*.cs diff=csharp
|
||||
*.sln merge=union
|
||||
*.csproj merge=union
|
||||
*.vbproj merge=union
|
||||
*.fsproj merge=union
|
||||
*.dbproj merge=union
|
||||
|
||||
# Standard to msysgit
|
||||
*.doc diff=astextplain
|
||||
*.DOC diff=astextplain
|
||||
*.docx diff=astextplain
|
||||
*.DOCX diff=astextplain
|
||||
*.dot diff=astextplain
|
||||
*.DOT diff=astextplain
|
||||
*.pdf diff=astextplain
|
||||
*.PDF diff=astextplain
|
||||
*.rtf diff=astextplain
|
||||
*.RTF diff=astextplain
|
|
@ -1,45 +0,0 @@
|
|||
pixelate.js
|
||||
===
|
||||
|
||||
**pixelate.js** is a simple library and jQuery plugin to pixelate any set of images and optionally reveal them on hover.
|
||||
|
||||
[Demo here](http://43081j.github.io/pixelate/)
|
||||
|
||||
Usage
|
||||
===
|
||||
|
||||
**pixelate.js** can be used with jQuery:
|
||||
|
||||
```javascript
|
||||
$('img').pixelate();
|
||||
```
|
||||
|
||||
Or without via HTML data attributes:
|
||||
|
||||
```html
|
||||
<img src="test.jpg" width="200" height="200" data-pixelate>
|
||||
```
|
||||
|
||||
Options
|
||||
===
|
||||
|
||||
* `value` The percentage of pixelation to perform, a value between `0` and `1`
|
||||
* `reveal` Reveal the image on hover and remain revealed if clicked
|
||||
* `revealonclick` Reveal the image on click. When combined with `reveal`, it will remain revealed after being clicked.
|
||||
|
||||
These options may be specified by data tags, like so:
|
||||
|
||||
```html
|
||||
<img src="img.jpg" data-pixelate data-value="0.5" data-reveal="false">
|
||||
```
|
||||
|
||||
or by jQuery/JavaScript:
|
||||
|
||||
```javascript
|
||||
$('img#myimage').pixelate({ value: 0.5, reveal: false });
|
||||
```
|
||||
|
||||
License
|
||||
===
|
||||
|
||||
MIT
|
133
library/pixelate.js/dist/pixelate.js
vendored
133
library/pixelate.js/dist/pixelate.js
vendored
|
@ -1,133 +0,0 @@
|
|||
/*
|
||||
* pixelate.js
|
||||
* 43081j
|
||||
* Pixelate images with ease
|
||||
* v0.5
|
||||
* License: MIT
|
||||
*/
|
||||
(function(window, $) {
|
||||
var pixelate = function(args) {
|
||||
// Parameters
|
||||
var defaults = {
|
||||
value: 0.05, // pixelation "density" (1 = no pixelation, 0 = all pixelated into 1 pixel)
|
||||
reveal: true, // reveal on hover
|
||||
revealonclick: false // reveal on click
|
||||
};
|
||||
// Get the current object (img)
|
||||
var element = this, //arguments[0],
|
||||
elementParent = element.parentNode;
|
||||
// Input arguments
|
||||
var input_options = args || {};
|
||||
if(typeof input_options !== 'object') {
|
||||
input_options = { value: parseInt(arguments[1]) };
|
||||
}
|
||||
// Function/object that will merge and store all options (priority to html attributes, then to user-specified arguments, then to defaults
|
||||
options = (function() {
|
||||
var opts = {};
|
||||
for(var k in defaults) {
|
||||
// HTML attribute
|
||||
if(element.hasAttribute('data-' + k)) {
|
||||
opts[k] = element.getAttribute('data-' + k);
|
||||
// User-specified argument
|
||||
} else if (k in input_options) {
|
||||
opts[k] = input_options[k];
|
||||
// Defaults (fallback if there is nothing else)
|
||||
} else {
|
||||
opts[k] = defaults[k];
|
||||
}
|
||||
}
|
||||
return opts;
|
||||
})();
|
||||
// Get image size
|
||||
var display = element.style.display;
|
||||
var imgWidth = element.width;
|
||||
var imgHeight = element.height;
|
||||
var revealed = false;
|
||||
// Create two canvas (one temporary to downscale, and one final to upscale)
|
||||
var canvtmp = document.createElement('canvas'); // temporary downscaling canvas
|
||||
canvtmp.width = imgWidth;
|
||||
canvtmp.height = imgHeight;
|
||||
var canvpix = document.createElement('canvas'); // final upscaling canvas
|
||||
canvpix.width = imgWidth;
|
||||
canvpix.height = imgHeight;
|
||||
var contexttmp = canvtmp.getContext('2d');
|
||||
// contexttmp.mozImageSmoothingEnabled = false;
|
||||
contexttmp.webkitImageSmoothingEnabled = false;
|
||||
contexttmp.imageSmoothingEnabled = false;
|
||||
var contextpix = canvpix.getContext('2d');
|
||||
// contextpix.mozImageSmoothingEnabled = false;
|
||||
contextpix.webkitImageSmoothingEnabled = false;
|
||||
contextpix.imageSmoothingEnabled = false;
|
||||
// Compute the downsampling width and height
|
||||
var width = imgWidth * options.value,
|
||||
height = imgHeight * options.value;
|
||||
// Downsampling (reduce image size, to create the pixels)
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear temporary canvas to avoid overlapping multiple times the same downsampled image, blurrying the contours
|
||||
contexttmp.drawImage(element, 0, 0, width, height);
|
||||
// Upsample back to original size (using another canvas to avoid issues with transparent images, which will leave the temporary canvas as a small icon in the upper left corner)
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear the canvas to avoid overlapping multiple times same image (particularly when using reveal option)
|
||||
contextpix.drawImage(canvtmp, 0, 0, width, height, 0, 0, canvpix.width, canvpix.height);
|
||||
// Reinsert image back in place (we hide the old and place a new one instead)
|
||||
element.style.display = 'none';
|
||||
elementParent.insertBefore(canvpix, element);
|
||||
// Manage user interaction: reveal on hover or on click
|
||||
if(options.revealonclick !== false && options.revealonclick !== 'false') {
|
||||
/*
|
||||
* Reveal on click
|
||||
*/
|
||||
canvpix.addEventListener('click', function(e) {
|
||||
revealed = !revealed;
|
||||
if(revealed) {
|
||||
// On reveal, show the original image
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contextpix.drawImage(element, 0, 0, imgWidth, imgHeight);
|
||||
} else {
|
||||
// On unreveal, recompute the pixelation
|
||||
contexttmp.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contexttmp.drawImage(element, 0, 0, width, height); // downsample using temporary canvas
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contextpix.drawImage(canvtmp, 0, 0, width, height, 0, 0, canvpix.width, canvpix.height); // upsample
|
||||
}
|
||||
});
|
||||
}
|
||||
if(options.reveal !== false && options.reveal !== 'false') {
|
||||
/*
|
||||
* Reveal on hover
|
||||
*/
|
||||
canvpix.addEventListener('mouseenter', function(e) {
|
||||
if(revealed) return;
|
||||
// On reveal, show the original image
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contextpix.drawImage(element, 0, 0, imgWidth, imgHeight);
|
||||
});
|
||||
canvpix.addEventListener('mouseleave', function(e) {
|
||||
if(revealed) return;
|
||||
// On unreveal, recompute the pixelation
|
||||
contexttmp.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contexttmp.drawImage(element, 0, 0, width, height); // downsample using temporary canvas
|
||||
contextpix.clearRect(0, 0, canvpix.width, canvpix.height); // clear
|
||||
contextpix.drawImage(canvtmp, 0, 0, width, height, 0, 0, canvpix.width, canvpix.height); // upsample
|
||||
});
|
||||
}
|
||||
};
|
||||
// Add prototype function to all objects (so that we can call img.pixelate())
|
||||
window.HTMLImageElement.prototype.pixelate = pixelate;
|
||||
if(typeof $ === 'function') {
|
||||
$.fn.extend({
|
||||
pixelate: function() {
|
||||
return this.each(function() {
|
||||
pixelate.apply(this, arguments);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// Add HTML attribute callback
|
||||
document.addEventListener('DOMContentLoaded', function(e) {
|
||||
var img = document.querySelectorAll('img[data-pixelate]');
|
||||
for(var i = 0; i < img.length; i++) {
|
||||
img[i].addEventListener('load', function() {
|
||||
this.pixelate();
|
||||
});
|
||||
};
|
||||
});
|
||||
})(window, typeof jQuery === 'undefined' ? null : jQuery);
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Pixelate.js</title>
|
||||
<style type="text/css">
|
||||
img, canvas { border:1px dashed; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img src="http://i.imgur.com/E7iu3UI.jpg" width="630" height="583" data-pixelate>
|
||||
<script src="../dist/pixelate.js"></script>
|
||||
</body>
|
||||
</html>
|
1158
library/pixelate.js/package-lock.json
generated
1158
library/pixelate.js/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"name": "pixelate.js",
|
||||
"version": "1.0.3",
|
||||
"description": "Pure JavaScript library to pixelate images and reveal on hover",
|
||||
"main": "dist/pixelate.js",
|
||||
"directories": {
|
||||
"example": "examples"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run lint && uglifyjs dist/pixelate.js -c -m -o pixelate.min.js",
|
||||
"lint": "eslint dist/*.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/43081j/pixelate.js.git"
|
||||
},
|
||||
"keywords": [
|
||||
"pixelate",
|
||||
"jquery",
|
||||
"reveal",
|
||||
"image"
|
||||
],
|
||||
"author": "43081j",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/43081j/pixelate.js/issues"
|
||||
},
|
||||
"homepage": "https://github.com/43081j/pixelate.js#readme",
|
||||
"devDependencies": {
|
||||
"eslint": "^4.18.2",
|
||||
"uglify-js": "^3.3.14"
|
||||
}
|
||||
}
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"name": "pixelate",
|
||||
"version": "1.0.3",
|
||||
"title": "Pixelate.js - Pixelate any image with ease",
|
||||
"author": {
|
||||
"name": "43081j",
|
||||
"url": "https://43081j.github.com/"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "http://opensource.org/licenses/MIT"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.6"
|
||||
},
|
||||
"description": "Plugin to easily pixelate any images and optionally reveal them on hover/click.",
|
||||
"keywords": ["pixelate", "censor", "hide", "reveal"],
|
||||
"demo": "http://43081j.github.io/pixelate/"
|
||||
}
|
1
library/pixelate.js/pixelate.min.js
vendored
1
library/pixelate.js/pixelate.min.js
vendored
|
@ -1 +0,0 @@
|
|||
!function(e,t){var a=function(){var a={value:.05,reveal:!0,revealonclick:!1},n=arguments[0]||{},i=this,e=i.parentNode;"object"!=typeof n&&(n={value:parseInt(arguments[0])}),n=function(){var e={};for(var t in a)i.hasAttribute("data-"+t)?e[t]=i.getAttribute("data-"+t):e[t]=t in n?n[t]:a[t];return e}();var t=i.width,r=i.height,d=!1,o=document.createElement("canvas");o.width=t,o.height=r;var l=o.getContext("2d");l.mozImageSmoothingEnabled=!1,l.webkitImageSmoothingEnabled=!1,l.imageSmoothingEnabled=!1;var u=t*n.value,c=r*n.value;l.drawImage(i,0,0,u,c),l.drawImage(o,0,0,u,c,0,0,o.width,o.height),i.style.display="none",e.insertBefore(o,i),!1!==n.revealonclick&&"false"!==n.revealonclick&&o.addEventListener("click",function(){(d=!d)?l.drawImage(i,0,0,t,r):(l.drawImage(i,0,0,u,c),l.drawImage(o,0,0,u,c,0,0,o.width,o.height))}),!1!==n.reveal&&"false"!==n.reveal&&(o.addEventListener("mouseenter",function(){d||l.drawImage(i,0,0,t,r)}),o.addEventListener("mouseleave",function(){d||(l.drawImage(i,0,0,u,c),l.drawImage(o,0,0,u,c,0,0,o.width,o.height))}))};"function"==typeof t&&t.fn.extend({pixelate:function(){var e=arguments;return this.each(function(){a.apply(this,e)})}}),document.addEventListener("DOMContentLoaded",function(){for(var e=document.querySelectorAll("img[data-pixelate]"),t=0;t<e.length;t++)e[t].addEventListener("load",function(){a.apply(this)})})}(window,"undefined"==typeof jQuery?null:jQuery);
|
|
@ -13,7 +13,6 @@ head_add_js('/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js');
|
|||
head_add_js('/library/bootbox/bootbox.min.js');
|
||||
head_add_js('/library/bootstrap-tagsinput/bootstrap-tagsinput.js');
|
||||
head_add_js('/library/datetimepicker/jquery.datetimepicker.js');
|
||||
//head_add_js('/library/pixelate.js/dist/pixelate.js');
|
||||
head_add_js('/library/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js');
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue