Skip to content

Instantly share code, notes, and snippets.

View JavaScript-Packer's full-sized avatar

Dave Brown JavaScript-Packer

48 followers · 1 following
View GitHub Profile
@JavaScript-Packer
JavaScript-Packer / GIF-split.php
Last active August 29, 2015 14:27
PHP - Split (AKA explode, extract, decode) animated GIF from web URL into frames but show the frames (base64 dataurls) on page instead of saving to hard drive. Most GIFS can be scaled down frames, so we added if($i%2==0) so it will skip every other frame... http://www.whak.ca/animated-gif/
<?php
//get every other frame
$GIF='http://www.whak.ca/animated-gif/www.WHAK.com_logo.gif';
$WHAK=new WHAK_decode(file_get_contents($GIF));
$i=1;
foreach($WHAK->WHAK_frames() as $frame){if($i%2==0){echo '<img src="data:image/gif;base64,'.base64_encode($frame).'">';};$i++;};
Class WHAK_decode{var $WHAK_TR=-1;var $WHAK_TG=-1;var $WHAK_TB=-1;var $WHAK_TI=0;var $WHAK_buffer=Array();var $WHAK_arrays=Array();var $WHAK_delays=Array();var $WHAK_dispos=Array();var $WHAK_stream="";var $WHAK_string="";var $WHAK_bfseek=0;var $WHAK_anloop=0;var $WHAK_screen=Array();var $WHAK_global=Array();var $WHAK_sorted;var $WHAK_colorS;var $WHAK_colorC;var $WHAK_colorF;function WHAK_decode($WHAK_pointer){$this->WHAK_stream=$WHAK_pointer;WHAK_decode::WHAK_get(6);WHAK_decode::WHAK_get(7);$this->WHAK_screen=$this->WHAK_buffer;$this->WHAK_colorF=$this->WHAK_buffer[4]&0x80?1:0;$this->WHAK_sorted=$this->WHAK_buffer[4]&0x08?1:0;$this->WHAK_colorC=$this->WHAK_buffer[4]&0x07;$this->WHAK_colorS=2 << $this->WHAK_colorC;if($this->WHAK_colorF==1)
@JavaScript-Packer
JavaScript-Packer / zip-marklet.js
Created August 18, 2015 15:21
This bookmarklet will take any web page your are on, compress it and pack it to a Zip file that spits out for you to download. Real web compression done with HTML5 and JavaScript, all client side and marklet processing is done completely in your web browser. Deflate, setting 9 www.ScriptCompress.com
javascript:var%20WHAK_com=atob('QlpoOTFBWSZTWeYMnOsAGyr/gD8ARAB3////v////7////9gHU99VRe99b40Pt755n2Mdzjrm+8X3djLQe7uKK2affXjo5190h73xlmbtp3z7vp9u9vZM6qj3ufU9A++y2lvt9q8+89r3WW27m6ddzd776D7fXwaEmgABGIZNAjE0MjSYTTATQyNUep5NNNTynqANTITACYImpqp5T1PU9TJoZD1PUeiNkjT1NqNAAAABqaZMQE0JMQFM1JsU2obRGh4UGh5TxQA00AADTIQgKeg1MgEnok9T0TaaGEyBqPIIxDIeoABhIkRoI0hpPQNJgDU0eo1PEp6AyNJvUnpp6j1GgZIPJMJIiaABBT1MGUp+ADU1P1U2nqGTU2mjCGjTaNKMGp6jNhmqlGf5Z8gRD7fur9+YQDRUfoL4rU//JP2uVutQPwkQ9P399QV1luOqoaZ8K++8a2Eva0PWHBkI7JOJyRNnHhhSyOsSM+VcoAHD2sEgyevrH9ncsX0B/Hafyg/Cm8Jh/BQ3ooLi7zZ8F/UpREKQNKTUWKww1h+jYAuj4rzku0CRm5VfSQpZRocj8aw+MXjRaDyABiIm0hErHt0uj0yt4ffyh7MFtN4x873OU3p+91G9VKKV8FHNKI1HNU9lhNo7bPRfazQ3Knri0ObDC0/5BBdPlPuYX2JgEMQR9kiQREIZJyxzX+XKIFNgMTHDy/yZHvPQzq2+Z6hqMzB1j55acb8UZVvjP+kpeGK6myGUdd4I1tmdrVphmdyaia/x2wp1HTLq9JIZ86s91cY1UwKaByoYzedwytOxIknUbqyoHSs99uDXqXdCtfSXOLVA6j8xhYFAzN0gI7vHyZpsBu4oJcx0INgRNN7aOmASgZFWd20kP+EhDRsaFRaBiroIcUimtXm4tcbZGWYLR2cBiWBG6q6rY4kXgAdxO4jbJyVAEsxvn858S+cvF4Qnp5xIRL/ZGJ3n5HK2FgNgYiy/parxFBR
@JavaScript-Packer
JavaScript-Packer / color-picker.htm
Created August 19, 2015 07:56
HTML5 color picker using canvas. Image embedded, no external files
<html>
<body>
<canvas id="myCanvas" width="578" height="276"></canvas>
<script>
function getMousePos(A,t){var a=A.getBoundingClientRect();return{x:t.clientX-a.left,y:t.clientY-a.top}}function drawColorSquare(A,t,a){var d=100,o=A.getContext("2d"),s=(A.width-d+a.width)/2,R=(A.height-d)/2;o.beginPath(),o.fillStyle=t,o.fillRect(s,R,d,d),o.strokeRect(s,R,d,d)}function init(A){var t=10,a=document.getElementById("myCanvas"),d=a.getContext("2d"),i=!1;d.strokeStyle="#444",d.lineWidth=2,a.addEventListener("mousedown",function(){i=!0},!1),a.addEventListener("mouseup",function(o){var n,k,u,y,b,r,e,s=getMousePos(a,o),R=void 0;i&&null!==s&&s.x>t&&s.x<t+A.width&&s.y>t&&s.y<t+A.height&&(n=d.getImageData(t,t,A.width,A.width),k=n.data,u=s.x-t,y=s.y-t,b=k[4*(A.width*y+u)],r=k[4*(A.width*y+u)+1],e=k[4*(A.width*y+u)+2],R="rgb("+b+","+r+","+e+")",drawColorSquare(a,R,A))},!1),d.drawImage(A,t,t),drawColorSquare(a,"white",A)}var imageObj=new Image;imageObj.onload=function(){init(this)},imageObj.src="data:image/jpeg;base64,/9j/4AAQSkZ
@JavaScript-Packer
JavaScript-Packer / off-the-air.htm
Created August 20, 2015 05:27
TV Static in HTML5 canvas. Random black and white static effect http://www.whak.ca/animated-gif/
<body>
<canvas id='c'></canvas>
<script>
function a(){var t,e,n,i,r=0;for(t=0;d>t;t++)for(e=0;g>e;e++)n=.5<Math.random()?255:0,h.data[r]=n,h.data[r+1]=n,h.data[r+2]=n,r+=4;k.putImageData(h,0,0),l++,setTimeout(a,0)}var h,n,p,q,t=document.getElementById("c"),k=t.getContext("2d"),d=t.width=320,g=t.height=240,m=(new Date).getTime(),l=0;for(h=k.createImageData(d,g),p=n=0;d>p;p++)for(q=0;g>q;q++)h.data[n+3]=255,n+=4;a();
</script>
</body>
@JavaScript-Packer
JavaScript-Packer / forever-changing-background.htm
Last active August 29, 2015 14:27
THE ALWAYS CHANGING BACKGROUND EFFECT, CHANGES EVERYTIME YOU RELOAD THE PAGE. Demo on http://codepen.io/samples/full/LVKmxg/
<body><h1>www.WHAK.com</h1>
<canvas id='c' style="position:fixed;top:0;left:0;z-index:-420;width:100%;height:100%"></canvas>
THE ALWAYS CHANGING BACKGROUND EFFECT<P>CHANGES EVERYTIME YOU RELOAD THE PAGE</P>
<script>
var rate=(Math.floor(Math.random() * 20) + 4);
function a() {
var u, n, e, r = 0;
for (u = 0; d > u; u++) {
for (n = 0; g > n; n++) {
e = .5 < Math.random() ? 255 : 0, h.data[r] = e, h.data[r + 1] = e, h.data[r + 2] = e,
@JavaScript-Packer
JavaScript-Packer / escape-any-UTF-character.js
Created August 21, 2015 10:55
Unicode and hexdecimal encoding so that less characters used when character code range is less than 256
function unicodeEscape(d) {
for (var b = "", e = 0, a, c; !isNaN(a = d.charCodeAt(e++)); ) c = a.toString(16),
b += 256 > a ? "\\x" + (15 < a ? "" :"0") + c :"\\u" + ("0000" + c).slice(-4);
return b;
}
alert(unicodeEscape("test"));
@JavaScript-Packer
JavaScript-Packer / encode-non-ascii.js
Created August 21, 2015 14:06
Only encode codepoints 127 and up. 127 to 255 get encoded to hexdecimal and 256 to 65536 get encoded to unicode
String.prototype.replaceWithUtf8 = function() {
function r(r) {
for (var t, n, e = "", i = 0; !isNaN(t = r.charCodeAt(i++)); ) n = t.toString(16),
e += 256 > t ? "\\x" + (t > 15 ? "" :"0") + n :"\\u" + ("0000" + n).slice(-4);
return e;
}
var a, c, o, u, s, e = "", i = this, t = [ "/", '"' ], n = [ "\\/", '\\"' ];
for (a = 0; a < i.length; a++) c = i.charCodeAt(a), o = i.charAt(a), u = t.indexOf(o),
u > -1 ? e += n[u] :c > 126 && 65536 > c ? (s = r(o), e += s) :e += o;
return e;
@JavaScript-Packer
JavaScript-Packer / video2canvas.htm
Last active August 29, 2015 14:27
HTML5 Video To Canvas Using JavaScript - When you play the video, you will see another copy in the canvas element. MP4 video in embedded VIA dataURI scheme. Nothing special, but soon I want to capture each frame as animated GIF, just one of the steps... Live demo on http://codepen.io/samples/pen/yNdRKQ
<script>
function draw(e, t, a, n, d) {
if (e.paused || e.ended) return !1;
a.drawImage(e, 0, 0, n, d);
var r = a.getImageData(0, 0, n, d);
r.data, t.putImageData(r, 0, 0), setTimeout(function() {
draw(e, t, a, n, d);
}, 0);
}
document.addEventListener("DOMContentLoaded", function() {
@JavaScript-Packer
JavaScript-Packer / Uint8Array2string.js
Created August 21, 2015 18:32
Uint8Array to String
function uintToString(uintArray) {
var encodedString = String.fromCharCode.apply(null, uintArray),
decodedString = decodeURIComponent(escape(encodedString));
return decodedString;
}
@JavaScript-Packer
JavaScript-Packer / ZIP-marklet.js
Last active September 9, 2015 23:09
Bookmarklet to compress web page you are on to a downloadable ZIP compressed file for archiving. Drag & drop marklet link on http://marklets.com/ZIP.aspx Made by www.scriptcompress.com
javascript:var%20WHAK_com=atob('QlpoOTFBWSZTWeYMnOsAGyr/gD8ARAB3////v////7////9gHU99VRe99b40Pt755n2Mdzjrm+8X3djLQe7uKK2affXjo5190h73xlmbtp3z7vp9u9vZM6qj3ufU9A++y2lvt9q8+89r3WW27m6ddzd776D7fXwaEmgABGIZNAjE0MjSYTTATQyNUep5NNNTynqANTITACYImpqp5T1PU9TJoZD1PUeiNkjT1NqNAAAABqaZMQE0JMQFM1JsU2obRGh4UGh5TxQA00AADTIQgKeg1MgEnok9T0TaaGEyBqPIIxDIeoABhIkRoI0hpPQNJgDU0eo1PEp6AyNJvUnpp6j1GgZIPJMJIiaABBT1MGUp+ADU1P1U2nqGTU2mjCGjTaNKMGp6jNhmqlGf5Z8gRD7fur9+YQDRUfoL4rU//JP2uVutQPwkQ9P399QV1luOqoaZ8K++8a2Eva0PWHBkI7JOJyRNnHhhSyOsSM+VcoAHD2sEgyevrH9ncsX0B/Hafyg/Cm8Jh/BQ3ooLi7zZ8F/UpREKQNKTUWKww1h+jYAuj4rzku0CRm5VfSQpZRocj8aw+MXjRaDyABiIm0hErHt0uj0yt4ffyh7MFtN4x873OU3p+91G9VKKV8FHNKI1HNU9lhNo7bPRfazQ3Knri0ObDC0/5BBdPlPuYX2JgEMQR9kiQREIZJyxzX+XKIFNgMTHDy/yZHvPQzq2+Z6hqMzB1j55acb8UZVvjP+kpeGK6myGUdd4I1tmdrVphmdyaia/x2wp1HTLq9JIZ86s91cY1UwKaByoYzedwytOxIknUbqyoHSs99uDXqXdCtfSXOLVA6j8xhYFAzN0gI7vHyZpsBu4oJcx0INgRNN7aOmASgZFWd20kP+EhDRsaFRaBiroIcUimtXm4tcbZGWYLR2cBiWBG6q6rY4kXgAdxO4jbJyVAEsxvn858S+cvF4Qnp5xIRL/ZGJ3n5HK2FgNgYiy/parxFBR