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

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3. ToBase64.dev - Convert Image to base64 - Css, Javascript and Data URI
  4. {% endblock %}
  5. {% block h1 %}Convert your Image to Base64{% endblock %}
  6. {% block body %}
  7. <div class="row" style="height: 60%">
  8. <div class="padding col-5 d-flex flex-column">
  9. <div class="row" style="height:85%">
  10. <div class="col-md-12" style="height:100%">
  11. <img id="imageb64" style="
  12. border-left-width: 5px;
  13. border-top-width: 5px;
  14. border-right-width: 5px;
  15. border-bottom-width: 5px;
  16. border-color: #17a2b8;
  17. border-style: solid;
  18. height: 100%;
  19. width: 100%;
  20. " src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
  21. </div>
  22. </div>
  23. <div class="custom-file" style="margin-top:auto">
  24. <input type="file" class="custom-file-input" id="files">
  25. <label class="custom-file-label" for="files">Choose file</label>
  26. </div>
  27. <!--<input class="form-control" type="file" id="files" name="file" style="width:100%;height: 100%;">-->
  28. </div>
  29. <div class="col-2 d-flex flex-column">
  30. <div class="padding row" style="margin-top:auto;margin-bottom:auto;">
  31. <button type="button" onclick="document.getElementById('output').value=imageB64" class="col-12 btn btn-info"><span class="spinner-border spinner-border-sm" id="loading" role="status" aria-hidden="true" style="display:none"></span><i class="fas fa-long-arrow-alt-right"></i></button>
  32. </div>
  33. </div>
  34. <div class="padding col-5 d-flex flex-column">
  35. <div style="height: 33%">
  36. <p style="margin-bottom: 0; text-align: left;">Base64:</p>
  37. <div style="height: 60%">
  38. <textarea class="form-control" id="output1" name="output" placeholder="Output will be displayed here..." spellcheck="false" style="width: 100%;height: 100%;"></textarea>
  39. </div>
  40. <button id="download" type="button" class="btn btn-info" onclick="copyToClipboard('output1')" style="margin-top:auto;width:100%">Copy to clipboard!</button>
  41. </div>
  42. <div style="height: 33%">
  43. <p style="margin-top:1em; margin-bottom: 0; text-align: left;">Base64 for use in &lt;img&gt; elements:</p>
  44. <div style="height: 60%">
  45. <textarea class="form-control" id="output2" name="output" placeholder="Output will be displayed here..." spellcheck="false" style="width: 100%;height: 100%;"></textarea>
  46. </div>
  47. <button id="download" type="button" class="btn btn-info" onclick="copyToClipboard('output2')" style="margin-top:auto;width: 100%;">Copy to clipboard!</button>
  48. </div>
  49. <div style="height: 33%">
  50. <p style="margin-top:1em; margin-bottom: 0; text-align: left;">Base64 for use as CSS background:</p>
  51. <div style="height: 60%">
  52. <textarea class="form-control" id="output3" name="output" placeholder="Output will be displayed here..." spellcheck=" false" style="width: 100%;height: 100%;"></textarea>
  53. </div>
  54. <button id="download" type="button" class="btn btn-info mt-1" onclick="copyToClipboard('output3')" style="margin-top:auto;width: 100%;">Copy to clipboard!</button>
  55. </div>
  56. </div>
  57. </div>
  58. <script type="text/javascript">
  59. // Add the following code if you want the name of the file appear on select
  60. $(".custom-file-input").on("change", function() {
  61. var fileName = $(this).val().split("\\").pop();
  62. $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  63. });
  65. function copyToClipboard(output) {
  66. var copyText = document.getElementById(output);
  67. copyText.select();
  68. document.execCommand("copy");
  70. }
  72. function download() {
  73. var url = document.getElementById('output3').src.replace(/^data:image\/[^;]+/, 'data:image/png');
  74. window.open(url);
  75. }
  77. function toimage() {
  78. var string = document.getElementById('input3').value;
  79. var image = "data:image/png;base64," + string;
  80. document.getElementById('output3').src = image;
  81. document.getElementById('download').disabled = false;
  82. }
  84. function totext() {
  85. var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0;
  86. e = Base64._utf8_encode(e); while (f < e.length) { n = e.charCodeAt(f++);
  87. r = e.charCodeAt(f++);
  88. i = e.charCodeAt(f++);
  89. s = n >> 2;
  90. o = (n & 3) << 4 | r >> 4;
  91. u = (r & 15) << 2 | i >> 6;
  92. a = i & 63; 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) } return t }, decode: function(e) { var t = ""; var n, r, i; var s, o, u, a; var f = 0;
  93. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, ""); while (f < e.length) { s = this._keyStr.indexOf(e.charAt(f++));
  94. o = this._keyStr.indexOf(e.charAt(f++));
  95. u = this._keyStr.indexOf(e.charAt(f++));
  96. a = this._keyStr.indexOf(e.charAt(f++));
  97. n = s << 2 | o >> 4;
  98. r = (o & 15) << 4 | u >> 2;
  99. i = (u & 3) << 6 | a;
  100. t = t + String.fromCharCode(n); if (u != 64) { t = t + String.fromCharCode(r) } if (a != 64) { t = t + String.fromCharCode(i) } } t = Base64._utf8_decode(t); return t }, _utf8_encode: function(e) { e = e.replace(/\r\n/g, "\n"); var t = ""; for (var n = 0; n < e.length; n++) { var r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) { t += String.fromCharCode(r >> 6 | 192);
  101. t += String.fromCharCode(r & 63 | 128) } else { t += String.fromCharCode(r >> 12 | 224);
  102. t += String.fromCharCode(r >> 6 & 63 | 128);
  103. t += String.fromCharCode(r & 63 | 128) } } return t }, _utf8_decode: function(e) { var t = ""; var n = 0; var r = c1 = c2 = 0; while (n < e.length) { r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r);
  104. n++ } else if (r > 191 && r < 224) { c2 = e.charCodeAt(n + 1);
  105. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  106. n += 2 } else { c2 = e.charCodeAt(n + 1);
  107. c3 = e.charCodeAt(n + 2);
  108. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  109. n += 3 } } return t } }
  110. // Define the string
  111. var string = document.getElementById('input4').value;
  113. // Encode the String
  114. var decodedString = Base64.decode(string);
  115. document.getElementById('output4').value = decodedString;
  116. }
  118. function tobase64() {
  119. var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function(e) { var t = ""; var n, r, i, s, o, u, a; var f = 0;
  120. e = Base64._utf8_encode(e); while (f < e.length) { n = e.charCodeAt(f++);
  121. r = e.charCodeAt(f++);
  122. i = e.charCodeAt(f++);
  123. s = n >> 2;
  124. o = (n & 3) << 4 | r >> 4;
  125. u = (r & 15) << 2 | i >> 6;
  126. a = i & 63; 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) } return t }, decode: function(e) { var t = ""; var n, r, i; var s, o, u, a; var f = 0;
  127. e = e.replace(/\\+\\+[++^A-Za-z0-9+/=]/g, ""); while (f < e.length) { s = this._keyStr.indexOf(e.charAt(f++));
  128. o = this._keyStr.indexOf(e.charAt(f++));
  129. u = this._keyStr.indexOf(e.charAt(f++));
  130. a = this._keyStr.indexOf(e.charAt(f++));
  131. n = s << 2 | o >> 4;
  132. r = (o & 15) << 4 | u >> 2;
  133. i = (u & 3) << 6 | a;
  134. t = t + String.fromCharCode(n); if (u != 64) { t = t + String.fromCharCode(r) } if (a != 64) { t = t + String.fromCharCode(i) } } t = Base64._utf8_decode(t); return t }, _utf8_encode: function(e) { e = e.replace(/\r\n/g, "\n"); var t = ""; for (var n = 0; n < e.length; n++) { var r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r) } else if (r > 127 && r < 2048) { t += String.fromCharCode(r >> 6 | 192);
  135. t += String.fromCharCode(r & 63 | 128) } else { t += String.fromCharCode(r >> 12 | 224);
  136. t += String.fromCharCode(r >> 6 & 63 | 128);
  137. t += String.fromCharCode(r & 63 | 128) } } return t }, _utf8_decode: function(e) { var t = ""; var n = 0; var r = c1 = c2 = 0; while (n < e.length) { r = e.charCodeAt(n); if (r < 128) { t += String.fromCharCode(r);
  138. n++ } else if (r > 191 && r < 224) { c2 = e.charCodeAt(n + 1);
  139. t += String.fromCharCode((r & 31) << 6 | c2 & 63);
  140. n += 2 } else { c2 = e.charCodeAt(n + 1);
  141. c3 = e.charCodeAt(n + 2);
  142. t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
  143. n += 3 } } return t } }
  145. // Define the string
  146. var string = document.getElementById('input2').value;
  148. // Encode the String
  149. var encodedString = Base64.encode(string);
  150. document.getElementById('output2').value = encodedString;
  151. }
  152. </script>
  153. <script>
  154. function handleFileSelect(evt) {
  155. document.getElementById("loading").style.display = "";
  156. var files = evt.target.files; // FileList object
  158. // Loop through the FileList and render image files as thumbnails.
  159. for (var i = 0, f; f = files[i]; i++) {
  160. // Only process image files.
  161. if (!f.type.match('image.*')) {
  162. continue;
  163. }
  165. var reader = new FileReader();
  167. // Closure to capture the file information.
  168. reader.onload = (function(theFile) {
  169. return function(e) {
  170. // Render thumbnail.
  171. document.getElementById('imageb64').src = e.target.result;
  172. document.getElementById("output3").value = "url('" + e.target.result + "')";
  173. document.getElementById("output2").value = e.target.result;
  174. document.getElementById("output1").value = e.target.result.split(',')[1];
  175. imageB64 = e.target.result;
  176. document.getElementById("loading").style.display = "none";
  177. };
  178. })(f);
  180. // Read in the image file as a data URL.
  181. reader.readAsDataURL(f);
  182. }
  183. }
  185. document.getElementById('files').addEventListener('change', handleFileSelect, false);
  186. </script>
  187. {% endblock %}