API tools faq
paste
Guest User

Untitled

a guest
Nov 21st, 2018
153
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.35 KB | None | 0 0
raw download clone embed print report
  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();
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!