templates/programming-examples.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3. ToBase64.dev - Programming examples Base64 conversion
  4. {% endblock %}
  5. {% block h1 %}Programming examples{% endblock %}
  6. {% block body %}
  7. <!doctype html>
  8. <div class="row">
  9. <div class="padding col">
  10. <p style="text-align: center;">Here you can copy & paste the code to do this conversion on the most common programming languages that exists. Feel free to share this webpage with all your collegues.</p>
  11. </div>
  12. </div>
  13. <div class="row" style="margin-top:2em;">
  14. <div class="accordion" id="accordionExample" style="width: 100%;text-align: left">
  15. <div class="card">
  16. <div class="card-header" id="headingTwo">
  17. <a class=" btn btn-link d-flex" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" title="what is base64 enconding?">
  18. <h2>Python3 | Image to base64 | Base64 to Image</h2>
  19. <span class="ml-auto"></span>
  20. </a>
  21. </div>
  22. <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
  23. <div class="card-body">
  24. <p>Place this function inside your code to convert an image to base64:</p>
  25. <xmp>
  26. import base64
  27. img_file = "image.png"
  28. def image_to_base64():
  29. b64 = base64.encodestring(open(img_file,"rb").read())
  30. # Python 2
  31. return b64
  32. # Python 3
  33. return b64.decode("utf8")
  34. </xmp>
  35. <p>Place this function inside your code to convert a base64 text to an image. <strong>img_data</strong> should be a the base64 string to be converted to image.</p>
  36. <xmp>
  37. import base64
  38. img_data = "R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
  39. def base64_to_image():
  40. with open("imageToSave.png", "wb") as fh:
  41. fh.write(base64.decodebytes(img_data))
  42. </xmp>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="card">
  47. <div class="card-header" id="headingTwo">
  48. <a class=" btn btn-link d-flex" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" title="what is base64 enconding?">
  49. <h2>Java | Image to base64 | Base64 to Image</h2>
  50. <span class="ml-auto"></span>
  51. </a>
  52. </div>
  53. <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
  54. <div class="card-body">
  55. <p>Place this function inside your code to convert an image to base64:</p>
  56. <xmp>
  57. public static void main(String[] args) {
  58. File file = new File("C:/Users/&lt;user&gt;/Desktop/image.png");
  59. String encodstring = encodeFileToBase64Binary(file);
  60. System.out.println(encodstring);
  61. }
  63. private static String encodeFileToBase64Binary(File file){
  64. String encodedfile = null;
  66. try {
  67. FileInputStream fileInputStreamReader = new FileInputStream(file);
  68. byte[] bytes = new byte[(int)file.length()];
  69. fileInputStreamReader.read(bytes);
  70. encodedfile = new String(Base64.encodeBase64(bytes), "UTF-8");
  71. } catch (Exception e) {
  72. e.printStackTrace();
  73. }
  74. return encodedfile;
  75. }
  76. </xmp>
  77. <p>Place this function inside your code to convert a base64 text to an image. <strong>base64Text</strong> should be a the base64 string to be converted to image.</p>
  78. <xmp>
  79. private static void base64ToImage(base64Text){
  80. String[] strings = base64String.split(",");
  81. byte[] data = DatatypeConverter.parseBase64Binary(strings[1]);
  82. String path = "C:\\Users\\&lt;user&gt;\\Desktop\\image.png";
  83. File file = new File(path);
  84. try (OutputStream outputStream = new BufferedOutputStream(new FileOutputStream(file))) {
  85. outputStream.write(data);
  86. } catch (IOException e) {
  87. e.printStackTrace();
  88. }
  89. }
  90. </xmp>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="card">
  95. <div class="card-header" id="headingOne">
  96. <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" title="what is tobase64.dev?">
  97. <h2> c# | Image to base64 c# | Base64 text to Image c#</h2>
  98. <span class="ml-auto"></span>
  99. </a>
  100. </div>
  101. <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
  102. <div class="card-body">
  103. <p>Place this function inside your code to convert an image to base64:</p>
  104. <xmp>
  105. public string ImageToBase64(){
  106. string path = "C:\\image.png";
  107. using(System.Drawing.Image image = System.Drawing.Image.FromFile(path))
  108. {
  109. using(MemoryStream m = new MemoryStream())
  110. {
  111. image.Save(m, image.RawFormat);
  112. byte[] imageBytes = m.ToArray();
  113. base64String = Convert.ToBase64String(imageBytes);
  114. return base64String;
  115. }
  116. }
  117. }
  118. </xmp>
  119. <p>Place this function inside your code to convert a base64 text to an image:</p>
  120. <xmp>
  121. public System.Drawing.Image Base64ToImage(base64String)
  122. {
  123. byte[] imageBytes = Convert.FromBase64String(base64String);
  124. MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length);
  125. ms.Write(imageBytes, 0, imageBytes.Length);
  126. System.Drawing.Image image = System.Drawing.Image.FromStream(ms, true);
  127. return image;
  128. }
  129. </xmp>
  130. </div>
  131. </div>
  132. </div>
  133. <div class="card">
  134. <div class="card-header" id="headingThree">
  135. <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" title="Is tobase64.dev secure?">
  136. <h2>Ruby on rails | Image to base64 | Base64 to image<span class="ml-auto"></span></h2>
  137. </a>
  138. </div>
  139. <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
  140. <div class="card-body">
  141. <p>Use this code to convert an image to base64:</p>
  142. <xmp>
  143. require "base64"
  144. encoded_string = Base64.encode64(open("url_to_image") { |io| io.read })
  145. </xmp>
  146. <p>Use this code to convert a base64 text to an image on Ruby:</p>
  147. <xmp>
  148. File.open('image.png', 'wb') do|f|
  149. f.write(Base64.decode64(base_64_encoded_data))
  150. end
  151. </xmp>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="card">
  156. <div class="card-header" id="headingFour">
  157. <a class="btn btn-link d-flex" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" title="How does ToBase64.dev works?">
  158. <h2>Javascript | Image to base64 | Base64 to image<span class="ml-auto"></span></h2>
  159. </a>
  160. </div>
  161. <div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordionExample">
  162. <div class="card-body">
  163. <p>Use this function inside your code to convert an image to base64:</p>
  164. <xmp>
  165. function getBase64(url, callback) {
  166. var image = new Image();
  167. image.onload = function () {
  168. var canvas = document.createElement('canvas');
  169. canvas.width = this.naturalWidth;
  170. canvas.height = this.naturalHeight;
  171. canvas.getContext('2d').drawImage(this, 0, 0);
  172. // Get raw image data
  173. callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));
  174. };
  175. image.src = url;
  176. }
  177. getBase64('/image.png', function(base64) {
  178. // Do whatever you'd like with the base64!
  179. });
  180. </xmp>
  181. <p>Place this code to convert a base64 text to an image and place it on the body:</p>
  182. <xmp>
  183. var image = new Image();
  184. image.src = 'data:image/png;base64,iVBORw0K...';
  185. document.body.appendChild(image);
  186. </xmp>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. {% endblock %}