templates/text-to-base64.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3. ToBase64.dev - Encode Text to base64
  4. {% endblock %}
  5. {% block h1 %}Encode text to base64{% endblock %}
  6. {% block body %}
  7. <div class="row" style="height: 60%;">
  8. <div class="padding col-5">
  9. <form method="post" action="" class="form" style="height: 100%">
  10. <textarea class="form-control" id="input2" name="input2" placeholder="Type (or paste) here..." spellcheck="false" style="width: 100%;height: 100%;"></textarea>
  11. </form>
  12. </div>
  13. <div class="col-2 d-flex flex-column">
  14. <div class="padding row" style="margin-top:auto;margin-bottom:auto;">
  15. <button type="button" onclick="tobase64()" class="col-12 btn btn-info"><i class="fas fa-long-arrow-alt-right"></i></button>
  16. </div>
  17. </div>
  18. <div class="padding col-5 d-flex flex-column">
  19. <div style="height: 85%">
  20. <textarea class="form-control" id="output2" name="output" placeholder="Output will be displayed here..." spellcheck="false" style="width: 100%;height: 100%;"></textarea>
  21. </div>
  22. <button id="download" type="button" class="btn btn-info" onclick="copyToClipboard('output2')" style="margin-top:auto;">Copy to clipboard</button>
  23. </div>
  24. </div>
  25. <script type="text/javascript">
  26. // Add the following code if you want the name of the file appear on select
  27. $(".custom-file-input").on("change", function() {
  28. var fileName = $(this).val().split("\\").pop();
  29. $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  30. });
  32. function copyToClipboard(element) {
  33. var copyText = document.getElementById(element);
  34. copyText.select();
  35. document.execCommand("copy");
  37. }
  39. function download() {
  40. var url = document.getElementById('output3').src.replace(/^data:image\/[^;]+/, 'data:image/png');
  41. window.open(url);
  42. }
  44. function toimage() {
  45. var string = document.getElementById('input3').value;
  46. var image = "data:image/png;base64," + string;
  47. document.getElementById('output3').src = image;
  48. document.getElementById('download').disabled = false;
  49. }
  51. function totext() {
  52. var Base64 = {
  53. _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  54. encode: function(e) {
  55. var t = "";
  56. var n, r, i, s, o, u, a;
  57. var f = 0;
  58. e = Base64._utf8_encode(e);
  59. while (f < e.length) {
  60. n = e.charCodeAt(f++);
  61. r = e.charCodeAt(f++);
  62. i = e.charCodeAt(f++);
  63. s = n >> 2;
  64. o = (n & 3) << 4 | r >> 4;
  65. u = (r & 15) << 2 | i >> 6;
  66. a = i & 63;
  67. if (isNaN(r)) { u = a = 64 } else if (isNaN(i)) { a = 64 } t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
  68. }
  69. return t
  70. },
  71. decode: function(e) {
  72. var t = "";
  73. var n, r, i;
  74. var s, o, u, a;
  75. var f = 0;
  76. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, "");
  77. while (f < e.length) {
  78. s = this._keyStr.indexOf(e.charAt(f++));
  79. o = this._keyStr.indexOf(e.charAt(f++));
  80. u = this._keyStr.indexOf(e.charAt(f++));
  81. a = this._keyStr.indexOf(e.charAt(f++));
  82. n = s << 2 | o >> 4;
  83. r = (o & 15) << 4 | u >> 2;
  84. i = (u & 3) << 6 | a;
  85. t = t + String.fromCharCode(n);
  86. if (u != 64) { t = t + String.fromCharCode(r) }
  87. if (a != 64) { t = t + String.fromCharCode(i) }
  88. }
  89. t = Base64._utf8_decode(t);
  90. return t
  91. },
  92. _utf8_encode: function(e) {
  93. e = e.replace(/\r\n/g, "\n");
  94. var t = "";
  95. for (var n = 0; n < e.length; n++) {
  96. var r = e.charCodeAt(n);
  97. if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) {
  98. t += String.fromCharCode(r >> 6 | 192);
  99. t += String.fromCharCode(r & 63 | 128)
  100. } else {
  101. t += String.fromCharCode(r >> 12 | 224);
  102. t += String.fromCharCode(r >> 6 & 63 | 128);
  103. t += String.fromCharCode(r & 63 | 128)
  104. }
  105. }
  106. return t
  107. },
  108. _utf8_decode: function(e) {
  109. var t = "";
  110. var n = 0;
  111. var r = c1 = c2 = 0;
  112. while (n < e.length) {
  113. r = e.charCodeAt(n);
  114. if (r < 128) {
  115. t += String.fromCharCode(r);
  116. n++
  117. } else if (r > 191 && r < 224) {
  118. c2 = e.charCodeAt(n + 1);
  119. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  120. n += 2
  121. } else {
  122. c2 = e.charCodeAt(n + 1);
  123. c3 = e.charCodeAt(n + 2);
  124. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  125. n += 3
  126. }
  127. }
  128. return t
  129. }
  130. }
  131. // Define the string
  132. var string = document.getElementById('input4').value;
  134. // Encode the String
  135. var decodedString = Base64.decode(string);
  136. document.getElementById('output4').value = decodedString;
  137. }
  139. function tobase64() {
  140. var Base64 = {
  141. _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  142. encode: function(e) {
  143. var t = "";
  144. var n, r, i, s, o, u, a;
  145. var f = 0;
  146. e = Base64._utf8_encode(e);
  147. while (f < e.length) {
  148. n = e.charCodeAt(f++);
  149. r = e.charCodeAt(f++);
  150. i = e.charCodeAt(f++);
  151. s = n >> 2;
  152. o = (n & 3) << 4 | r >> 4;
  153. u = (r & 15) << 2 | i >> 6;
  154. a = i & 63;
  155. if (isNaN(r)) { u = a = 64 } else if (isNaN(i)) { a = 64 } t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
  156. }
  157. return t
  158. },
  159. decode: function(e) {
  160. var t = "";
  161. var n, r, i;
  162. var s, o, u, a;
  163. var f = 0;
  164. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, "");
  165. while (f < e.length) {
  166. s = this._keyStr.indexOf(e.charAt(f++));
  167. o = this._keyStr.indexOf(e.charAt(f++));
  168. u = this._keyStr.indexOf(e.charAt(f++));
  169. a = this._keyStr.indexOf(e.charAt(f++));
  170. n = s << 2 | o >> 4;
  171. r = (o & 15) << 4 | u >> 2;
  172. i = (u & 3) << 6 | a;
  173. t = t + String.fromCharCode(n);
  174. if (u != 64) { t = t + String.fromCharCode(r) }
  175. if (a != 64) { t = t + String.fromCharCode(i) }
  176. }
  177. t = Base64._utf8_decode(t);
  178. return t
  179. },
  180. _utf8_encode: function(e) {
  181. e = e.replace(/\r\n/g, "\n");
  182. var t = "";
  183. for (var n = 0; n < e.length; n++) {
  184. var r = e.charCodeAt(n);
  185. if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) {
  186. t += String.fromCharCode(r >> 6 | 192);
  187. t += String.fromCharCode(r & 63 | 128)
  188. } else {
  189. t += String.fromCharCode(r >> 12 | 224);
  190. t += String.fromCharCode(r >> 6 & 63 | 128);
  191. t += String.fromCharCode(r & 63 | 128)
  192. }
  193. }
  194. return t
  195. },
  196. _utf8_decode: function(e) {
  197. var t = "";
  198. var n = 0;
  199. var r = c1 = c2 = 0;
  200. while (n < e.length) {
  201. r = e.charCodeAt(n);
  202. if (r < 128) {
  203. t += String.fromCharCode(r);
  204. n++
  205. } else if (r > 191 && r < 224) {
  206. c2 = e.charCodeAt(n + 1);
  207. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  208. n += 2
  209. } else {
  210. c2 = e.charCodeAt(n + 1);
  211. c3 = e.charCodeAt(n + 2);
  212. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  213. n += 3
  214. }
  215. }
  216. return t
  217. }
  218. }
  220. // Define the string
  221. var string = document.getElementById('input2').value;
  223. // Encode the String
  224. var encodedString = Base64.encode(string);
  225. document.getElementById('output2').value = encodedString;
  226. }
  227. </script>
  228. <script>
  229. function handleFileSelect(evt) {
  230. document.getElementById("loading").style.display = "";
  231. var files = evt.target.files; // FileList object
  233. // Loop through the FileList and render image files as thumbnails.
  234. for (var i = 0, f; f = files[i]; i++) {
  235. // Only process image files.
  236. if (!f.type.match('image.*')) {
  237. continue;
  238. }
  240. var reader = new FileReader();
  242. // Closure to capture the file information.
  243. reader.onload = (function(theFile) {
  244. return function(e) {
  245. // Render thumbnail.
  246. document.getElementById('imageb64').src = e.target.result;
  247. document.getElementById("output3").value = "url('" + e.target.result + "')";
  248. document.getElementById("output2").value = e.target.result;
  249. document.getElementById("output1").value = e.target.result.split(',')[1];
  250. imageB64 = e.target.result;
  251. document.getElementById("loading").style.display = "none";
  252. };
  253. })(f);
  255. // Read in the image file as a data URL.
  256. reader.readAsDataURL(f);
  257. }
  258. }
  260. //document.getElementById('files').addEventListener('change', handleFileSelect, false);
  261. </script>
  262. {% endblock %}