remove pixelate - it doesn't really work for what we need

This commit is contained in:
zotlabs 2019-07-31 21:49:04 -07:00
parent 57a2fe9dd6
commit fa9bef00fe
11 changed files with 0 additions and 1441 deletions

View file

@ -1,6 +0,0 @@
root = true
[*.{js,json}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

View file

@ -1,7 +0,0 @@
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"jquery": true
}
}

View file

@ -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

View file

@ -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

View file

@ -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);

View file

@ -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>

File diff suppressed because it is too large Load diff

View file

@ -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"
}
}

View file

@ -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/"
}

View file

@ -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);

View file

@ -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');