Need a unique gift idea?
A Pastebin account makes a great Christmas gift
SHARE
TWEET

Untitled

a guest Nov 21st, 2018 88 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
 
  1. /**
  2.  * @author Hakim El Hattab
  3.  *
  4.  * Recreates bitmap images using HTML text. Images are
  5.  * drawn onto a canvas element so that the pixels can
  6.  * be read. Letters, with colors matching the image pixels,
  7.  * are then placed at random locations on the screen.
  8.  */
  9. var Textify = function () {function w() {
  10.             b = new DAT.GUI({
  11.                 width: 320
  12.             });
  13.             a = K(C.ABC);
  14.             a.redraw = function () {
  15.                 x && y()
  16.             };
  17.             a.save = function () {
  18.                 x && D()
  19.             };
  20.             a.image = function () {
  21.                 p.click()
  22.             };
  23.             z = b.add(a, "preset").name("Preset").options("ABC", "Pointillism", "Mosaic", "Stitch", "@#%", "Bubbles", "StarStruck", "Pixelate", "Binary", "Snow", "Dash").onChange(function (g) {
  24.                 z.removeOption(A);
  25.                 g = C[g];
  26.                 a.filter = g.filter;
  27.                 a.backgroundColor = g.backgroundColor;
  28.                 a.characterSet = g.characterSet;
  29.                 a.characterLimit = g.characterLimit;
  30.                 a.characterScale = g.characterScale;
  31.                 a.characterFontFamily = g.characterFontFamily;
  32.                 a.characterFontWeight = g.characterFontWeight;
  33.                 b.listen()
  34.             });
  35.             b.add(a, "filter").name("Filter").options("None", "Black & White", "Sepia").listen().onChange(m);
  36.             b.add(a, "backgroundColor").name("Background").options({
  37.                 "Dark Grey": "#333",
  38.                 "Light Grey": "#888",
  39.                 Black: "#000",
  40.                 White: "#fff",
  41.                 Red: "#c21a08",
  42.                 Green: "#54ad3c",
  43.                 Blue: "#6c94d2",
  44.                 Transparent: "transparent",
  45.                 "Source Image": "image"
  46.             }).listen().onChange(m);
  47.             b.add(a, "characterSet").name("Character Set").listen().onChange(m);
  48.             b.add(a, "characterLimit").name("Character Quantity").min(1E3).max(1E5).step(500).listen().onChange(m);
  49.             b.add(a, "characterScale").name("Font Scale").min(0.1).max(5).step(0.1).listen().onChange(m);
  50.             b.add(a, "characterFontFamily").name("Font Family").options({
  51.                 Arial: "Arial",
  52.                 "Comic Sans MS": "Comic Sans MS",
  53.                 Helvetica: "Helvetica",
  54.                 monospace: "monospace",
  55.                 "Times New Roman": "Times New Roman"
  56.             }).listen().onChange(m);
  57.             guiFontWeight = b.add(a, "characterFontWeight").name("Font Weight").options("normal", "bold", "bolder").listen().onChange(m);
  58.             b.add(a, "useCanvas").name("Draw on Canvas (<strong>faster</strong>)").listen().onChange(m);
  59.             L === !1 && (b.add(a, "image").name("Browse for Image"), B = b.add(a, "save").name("Save Image"));
  60.             E = b.add(a, "redraw").name("Apply Settings");
  61.             E.domElement.className += " apply-button";
  62.             b.domElement.style.position = "absolute";
  63.             b.domElement.style.top = "0px";
  64.             b.domElement.style.right = "-20px";
  65.             document.querySelector(".guidat-controllers").style.height = "auto";
  66.             DAT.GUI.autoPlace = !1;
  67.             b.autoListen = !1
  68.         }function m() {
  69.             z.prependOption(A, !0);
  70.             a.preset = A
  71.         }function K(a) {
  72.             var l = {},
  73.                 d;
  74.             for (d in a) l[d] = a[d];
  75.             return l
  76.         }function F() {
  77.             k.style.left = (window.innerWidth - j) * 0.5 + "px";
  78.             k.style.top = (window.innerHeight - i) * 0.5 + 16 + "px";
  79.             f.style.left = (window.innerWidth - f.width) * 0.5 + "px";
  80.             f.style.top = (window.innerHeight - f.height) * 0.5 + 16 + "px"
  81.         }function M() {
  82.             this.files.length && G(this.files[0])
  83.         }function N(a) {
  84.             a.stopPropagation();
  85.             a.preventDefault();
  86.             a = a.dataTransfer.files;
  87.             a.length && G(a[0])
  88.         }function G(a) {
  89.             var l = new FileReader;
  90.             l.onloadend = O;
  91.             l.readAsDataURL(a)
  92.         }function O(g) {
  93.             g.target.result.match(/^data:image/) ? (a.imageURL = P, c.src = g.target.result, setTimeout(y, 100)) : alert("Unexpected file format, dude.")
  94.         }function Q(a) {
  95.             c.onload = function () {
  96.                 x = !0;
  97.                 y()
  98.             };
  99.             c.onerror = function () {
  100.                 alert("Failed to load image with URL " + c.src)
  101.             };
  102.             c.src = a
  103.         }function y() {
  104.             s = a.useCanvas;
  105.             if (a.backgroundColor === "transparent") document.querySelector("html").style.background = 'url("assets/images/transparent-pattern.png")';
  106.             else if (a.backgroundColor !== "image") document.querySelector("html").style.background = a.backgroundColor;
  107.             j = c.width;
  108.             i = c.height;
  109.             var g = window.innerWidth * 0.8,
  110.                 l = window.innerHeight * 0.8,
  111.                 d = 1;
  112.             if (j > g || i > l) d = Math.min(g / j, l / i), j = Math.floor(j * d), i = Math.floor(i * d);
  113.             k.innerHTML = "";
  114.             k.style.width = j + "px";
  115.             k.style.height = i + "px";
  116.             k.style.fontFamily = a.characterFontFamily;
  117.             k.style.fontWeight = a.characterFontWeight;
  118.             o = H * a.characterScale * 1.5;
  119.             h.restore();
  120.             h.clearRect(0, 0, f.width, f.height);
  121.             h.save();
  122.             f.width = j + o * 2;
  123.             f.height = i + o * 2;
  124.             if (s) if (a.backgroundColor === "image") h.save(), h.translate(o, o), h.scale(j / c.width, i / c.height), h.drawImage(c, 0, 0, c.width, c.height), h.restore();
  125.             else if (a.backgroundColor !== "transparent") h.fillStyle = a.backgroundColor, h.fillRect(0, 0, f.width, f.height);
  126.             h.translate(o, o);
  127.             u.width = j;
  128.             u.height = i;
  129.             q.save();
  130.             q.scale(d, d);
  131.             q.drawImage(c, 0, 0, c.width, c.height);
  132.             q.restore();
  133.             r = q.getImageData(0, 0, j, i).data;
  134.             I = r.length / 4;
  135.             t = [];
  136.             B && B.name(s ? "Save Image" : "View Source");
  137.             F();
  138.             J()
  139.         }function J() {
  140.             for (var g = a.backgroundColor === "transparent", l = 0; l < R; l++) {
  141.                 var d = Math.floor(Math.random() * I),
  142.                     b = d * 4,
  143.                     c = Math.floor(d / j),
  144.                     d = Math.round((d / j - c) * j),
  145.                     f = Math.round(S + Math.random() * H) * a.characterScale,
  146.                     i = a.characterSet[Math.floor(Math.random() * a.characterSet.length)],
  147.                     e = {
  148.                         r: r[b],
  149.                         g: r[b + 1],
  150.                         b: r[b + 2],
  151.                         a: (0.3 + Math.random() * 0.7).toFixed(2)
  152.                     },
  153.                     b = r[b + 3] / 255;
  154.                 if (g && b === 0) e.a = 0;
  155.                 if (a.filter === "Black & White") e.r = e.g = e.b = Math.round((e.r + e.g + e.b) / 3);
  156.                 else if (a.filter === "Sepia") e.r = e.g = e.b = Math.round((e.r + e.g + e.b) / 3), e.b = Math.round(e.b * 0.85);
  157.                 s ? (d -= f / 2, c += f / 2, h.save(), h.font = a.characterFontWeight + " " + f + "px " + a.characterFontFamily, h.fillStyle = "rgba(" + e.r + "," + e.g + "," + e.b + ", " + e.a + ")", h.fillText(i, d, c), h.restore(), t.push(i)) : (d -= f / 2, c -= f / 2, b = document.createElement("p"), b.style.left = d + "px", b.style.top = c + "px", b.style.color = "rgba(" + e.r + "," + e.g + "," + e.b + ", " + e.a + ")", b.style.fontSize = f + "px", b.innerHTML = i, k.appendChild(b), t.push(b))
  158.             }
  159.             t.length < a.characterLimit ? (n.style.visibility = "visible", v.style.width = Math.min(t.length / a.characterLimit, 1) * n.offsetWidth + "px", requestAnimFrame(J)) : (n.style.visibility = "hidden", v.style.width = "0px")
  160.         }function D() {
  161.             if (s) {
  162.                 var b = window.open("Textify Source", "height=400, width=700, toolbar=no, scrollbars=no, menubar=no");
  163.                 b.document.write('<img src="' + f.toDataURL() + '"/>')
  164.             } else {
  165.                 var b = window.open("", "Textify Source", "height=400, width=700, toolbar=no, scrollbars=no, menubar=no"),
  166.                     c = b.document.createElement("textarea");
  167.                 c.setAttribute("cols", "92");
  168.                 c.setAttribute("rows", "27");
  169.                 c.innerHTML += "<style>\n";
  170.                 c.innerHTML += "\t.textify-output p {\n";
  171.                 c.innerHTML += "\t\tposition: absolute;\n";
  172.                 c.innerHTML += "\t}\n";
  173.                 c.innerHTML += "</style>\n";
  174.                 var d = b.document.createElement("div");
  175.                 d.setAttribute("class", "textify-output");
  176.                 d.style.fontFamily = a.characterFontFamily;
  177.                 d.style.fontWeight = a.characterFontWeight;
  178.                 d.innerHTML += k.innerHTML;
  179.                 c.innerHTML += d.outerHTML;
  180.                 b.document.write(c.outerHTML)
  181.             }
  182.         }
  183.         var R = 1E3,
  184.             T = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"][Math.floor(Math.random() * 5)],
  185.             P = "(Drag and drop works too)",
  186.             A = "Custom",
  187.             S = 10,
  188.             H = 15,
  189.             C = {
  190.                 ABC: {
  191.                     preset: "ABC",
  192.                     filter: "None",
  193.                     useCanvas: !0,
  194.                     characterSet: "ABC",
  195.                     characterLimit: 13E3,
  196.                     characterScale: 1.2,
  197.                     characterFontFamily: "AppleGothic",
  198.                     characterFontWeight: "bold",
  199.                     backgroundColor: "#333"
  200.                 },
  201.                 Pointillism: {
  202.                     preset: "Pointillism",
  203.                     filter: "None",
  204.                     useCanvas: !0,
  205.                     characterSet: "\u2022",
  206.                     characterLimit: 18E3,
  207.                     characterScale: 2.5,
  208.                     characterFontFamily: "Comic Sans MS",
  209.                     characterFontWeight: "bold",
  210.                     backgroundColor: "#333"
  211.                 },
  212.                 Mosaic: {
  213.                     preset: "Mosaic",
  214.                     filter: "None",
  215.                     useCanvas: !0,
  216.                     characterSet: "\u25b2\u25bc\u25c0\u25ba\u25c6",
  217.                     characterLimit: 13E3,
  218.                     characterScale: 1.5,
  219.                     characterFontFamily: "Helvetica",
  220.                     characterFontWeight: "normal",
  221.                     backgroundColor: "#333"
  222.                 },
  223.                 Bubbles: {
  224.                     preset: "Bubbles",
  225.                     filter: "None",
  226.                     useCanvas: !0,
  227.                     characterSet: "oO\u25cc\u25ce",
  228.                     characterLimit: 16E3,
  229.                     characterScale: 1.5,
  230.                     characterFontFamily: "Arial",
  231.                     characterFontWeight: "normal",
  232.                     backgroundColor: "#333"
  233.                 },
  234.                 "@#%": {
  235.                     preset: "@#%",
  236.                     filter: "None",
  237.                     useCanvas: !0,
  238.                     characterSet: "@#%",
  239.                     characterLimit: 16E3,
  240.                     characterScale: 1.5,
  241.                     characterFontFamily: "monospace",
  242.                     characterFontWeight: "normal",
  243.                     backgroundColor: "#333"
  244.                 },
  245.                 Pixelate: {
  246.                     preset: "Pixelate",
  247.                     filter: "None",
  248.                     useCanvas: !0,
  249.                     characterSet: "\u25fc",
  250.                     characterLimit: 12E3,
  251.                     characterScale: 1.1,
  252.                     characterFontFamily: "Arial",
  253.                     characterFontWeight: "normal",
  254.                     backgroundColor: "#333"
  255.                 },
  256.                 Binary: {
  257.                     preset: "Binary",
  258.                     filter: "None",
  259.                     useCanvas: !0,
  260.                     characterSet: "01",
  261.                     characterLimit: 1E4,
  262.                     characterScale: 1.5,
  263.                     characterFontFamily: "Arial",
  264.                     characterFontWeight: "normal",
  265.                     backgroundColor: "#333"
  266.                 },
  267.                 StarStruck: {
  268.                     preset: "StarStruck",
  269.                     filter: "None",
  270.                     useCanvas: !0,
  271.                     characterSet: "\u2726\u2729\u272a\u272d",
  272.                     characterLimit: 12E3,
  273.                     characterScale: 2,
  274.                     characterFontFamily: "Helvetica",
  275.                     characterFontWeight: "normal",
  276.                     backgroundColor: "#333"
  277.                 },
  278.                 Snow: {
  279.                     preset: "Snow",
  280.                     filter: "None",
  281.                     useCanvas: !0,
  282.                     characterSet: "\u2746\u2747\u274b",
  283.                     characterLimit: 12E3,
  284.                     characterScale: 2,
  285.                     characterFontFamily: "Arial",
  286.                     characterFontWeight: "normal",
  287.                     backgroundColor: "#333"
  288.                 },
  289.                 Dash: {
  290.                     preset: "Dash",
  291.                     filter: "None",
  292.                     useCanvas: !0,
  293.                     characterSet: "/\\",
  294.                     characterLimit: 17E3,
  295.                     characterScale: 2,
  296.                     characterFontFamily: "Arial",
  297.                     characterFontWeight: "normal",
  298.                     backgroundColor: "#333"
  299.                 },
  300.                 Stitch: {
  301.                     preset: "Stitch",
  302.                     filter: "None",
  303.                     useCanvas: !0,
  304.                     characterSet: "\u2716\u2715",
  305.                     characterLimit: 9E3,
  306.                     characterScale: 2,
  307.                     characterFontFamily: "Helvetica",
  308.                     characterFontWeight: "normal",
  309.                     backgroundColor: "#333"
  310.                 }
  311.             },
  312.             a = {},
  313.             b, z, B, E, n, v, p, u, q, k, f, h, o = 0,
  314.             c, r, I, t, j = 1,
  315.             i = 1,
  316.             x = !1,
  317.             s = !1;
  318.         navigator.userAgent.toLowerCase().match(/ipod/gi);
  319.         navigator.userAgent.toLowerCase().match(/ipad/gi);
  320.         navigator.userAgent.toLowerCase().match(/iphone/gi);
  321.         var L = !! navigator.userAgent.toLowerCase().match(/ipod|ipad|iphone/gi);
  322.         return {
  323.             initialize: function () {
  324.                 c = document.createElement("img");
  325.                 u = document.createElement("canvas");
  326.                 q = u.getContext("2d");
  327.                 f = document.createElement("canvas");
  328.                 f.setAttribute("class", "textify-output-canvas");
  329.                 h = f.getContext("2d");
  330.                 k = document.createElement("div");
  331.                 k.setAttribute("class", "textify-output-html");
  332.                 n = document.createElement("div");
  333.                 n.setAttribute("class", "textify-progress");
  334.                 v = document.createElement("div");
  335.                 n.appendChild(v);
  336.                 progressText = document.createElement("p");
  337.                 n.appendChild(progressText);
  338.                 p = document.createElement("input");
  339.                 p.setAttribute("type", "file");
  340.                 p.style.visibility = "hidden";
  341.                 document.body.appendChild(p);
  342.                 document.body.appendChild(f);
  343.                 document.body.appendChild(k);
  344.                 document.body.appendChild(n);
  345.                 window.addEventListener("resize", F, !1);
  346.                 document.addEventListener("dragover", function (a) {
  347.                     a.preventDefault()
  348.                 }, !1);
  349.                 document.addEventListener("dragenter", function (a) {
  350.                     a.preventDefault()
  351.                 }, !1);
  352.                 document.addEventListener("dragexit", function (a) {
  353.                     a.preventDefault()
  354.                 }, !1);
  355.                 document.addEventListener("drop", N, !1);
  356.                 p.addEventListener("change", M, !1);
  357.                 w();
  358.                 Q(T)
  359.             },
  360.             viewSource: D
  361.         }
  362.     }();
  363. window.requestAnimFrame = function () {
  364.     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (w) {
  365.         window.setTimeout(w, 1E3 / 60)
  366.     }
  367. }();
  368. Textify.initialize();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top