Monday, December 14, 2015

Membuat Tool ImageBase64 Converter

tool image base64 blogger

Saat ini penggunaan image base64 masih jarang dilakukan bagi kalangan blogger namun lain halnya bagi mereka yang mengoptimalkan kecepatan loading blognya, Karena element design website ataupun situs blog terdiri dari sebuah gambar yang akan menghiasi halaman ketika ditampilkan. Namun jika terlalu banyak kita menyisipkan gambar dalam setiap halaman blog kita akan menyebabkan loading blog terasa berat dan memperbanyak permintaan HTTP. Cara Mengurangi Permintaan HTTP Request Blogger

Salah satu cara untuk meringankan blog kita adalah dengan mengkonversi gambar ke base64.  Baca Cara Membuat Loading Blog Menjadi Super Cepat . Pada kesempatan kali ini saya akan memberikan contoh cara membuat tool generator konversi image ke base64 di blogger dengan fungsi preview, agar nantinya tidak terjadi kesalahan dalam upload gambar karena gambar yang kita konversi bisa kita lihat terlebih dulu sebelum kita pasang ke dalam blog. Baca juga Membuat Tool Modifikasi Design Blogger

DEMO

Cara Membuat Tool Generator ImageBase64 Converter Di Blogger


Untuk cara pemasangan di halaman Statis simpan kode dibawah ini sebelum kode </head>

<b:if cond="data:blog.pageType == &quot;static_page&quot;">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<script src='//cdn.rawgit.com/Samsurysites/Base64/master/modernizr' type='text/javascript'/>
</b:if>
Kemudian masukkan kode HTML dibawah ini di Halaman statis pada mode HTML

<div class='kepala-base'>TOOL IMAGE<span> BASE64 CONVERTER</span></div>
<div class='wrapper'>
<br />
  <input type="file" id="files" class="inputFile" name="files[]" />
</div>
<!-- lightbox -->
<div class="overlay">
  <a href="#" class="close_overlay">x</a>
  <div class="output"></div> 
<br />
</div>

/*  = body
----------------------------*/
html,body{
  position:relative;
  height:100%;
}
.kepala-base{
  background:#555;
  border:2px solid #555;
  color:#fff;
  padding:15px;
  text-align:center;
  font-size:20px;
  }

.wrapper{
  background:#454851;
  border:2px solid #555;
  border-radius: 0px 0 3px 3px;
  padding:20px 30px;
  display: block;
  margin: 0;
  width: 100%;
  height:200px;
  text-align: center;
}

/*  = input file
----------------------------*/
.inputFile {
  background:transparent;
  color: transparent;
  outline:none;
  cursor:pointer;
  display:block;
  margin:0 auto;
}
.inputFile::-webkit-file-upload-button {
  visibility: hidden;
}
.inputFile::before {
  content: 'Pilih Gambar';
  margin: 10px;
  color: #FFF;
  display: inline-block;
  background: #F2784B;
  padding: 5px;
  width: 100px;
  height: 48px;
  line-height: 40px;
  text-align: center;
  text-decoration:none;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-family: 'Oswald', 'sans-serif';
  font-weight: 300;
  font-size: 20px;
  border-radius: 2px;
  transition:all 0.2s ease;
}
.inputFile:hover::before {
  color: #eee;
  transition:all 0.2s ease;
}
.inputFile:active {
  outline: 0;
}
.inputFile:active::before {
  color: #FFF;
}
input:focus,input:hover{background:#454851}
.btn{
  margin:5px;
  color: #FFF;
  display: inline-block;
  background: #757D75;
  padding: 10px 14px;
  text-align: center;
  text-decoration:none;
  outline: none;
  white-space: nowrap;
  cursor: pointer;
  font-family: 'Oswald', 'sans-serif';
  font-weight: 300;
  font-size: 20px;
  border-radius: 2px;
  transition:all 0.2s ease;
}
.btn:hover{
  background: #4A6266;
  color: #fafafa;
  transition:all 0.2s ease;
}
/*  = lightbox
----------------------------*/
.overlay{
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height:199%;
  background:#757D75;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.close_overlay {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 40px;
  width: 50px;
  height: 50px;
  line-height: 45px;
  background:#F46B63;
  color:#fafafa;
  transition: all 0.5s ease;
}
.close_overlay:hover{
  background: #4A6266;
  color: #fafafa;
  transition:all 0.5s ease;
}
.show{
  background:#6C7767;
  opacity: 1;
  visibility: visible;
  z-index: 999999999;
}
.output {
  background:#8BA987;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 5% auto;
  padding: 1em;
  width: 600px;
  height: 500px;
  overflow:auto;
}
.output ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 3px;
  display: block;
  color: #555;
  font-size: 13px;
}
.output ul b{
  color: #555;
}
.textarea {
  overflow: auto;
  width: 100%;
  height: 200px;
  margin: auto;
  margin-bottom:16px;
  display: block;
  border: 1px solid #ecf0f1;
  background: #ecf0f1;
  color: #7f8c8d;
  font-size:13px;
  font-family:monospace,sans-serif;
  
  word-break: break-all; 
  word-wrap: break-word;
  white-space: pre;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  white-space: pre\9; 
}
.thumb {
  display: block;
  width: 50%;
  height: auto;
  margin: 10px auto;
  box-shadow: 0 6px 6px -6px #000;
}

var img2data = (function() {
  'use strict';
  return {
    // this.qS(foo)
    qS: function(el) {
      return document.querySelector(el);
    },
    run: function() {
      this.convert(); 
    },
    convert: function() {
      // vars 
      var fls = this.qS('#files'),
          output = this.qS('.output'),
          overlay = this.qS('.overlay'),
          close_overlay = this.qS('.close_overlay');
      
      fls.addEventListener('change', function(e) {
        var file = fls.files[0],
            txtType = /text.*/, // all text files
            imgType = /image.*/, // all image files
            fR = new FileReader(); // fileReader start
        
        fR.onload = function(e) {
          // if text 
          if (file.type.match(txtType)) {
            var rS = fR.result,
                // template 
                render = '<a class="btn" href="'+rS+'" target="blank">Lihat</a><ul>'+
                  '<li><b>Name: </b>  '+file.name+'</li>'+
                  '<li><b>Size: </b>  '+file.size+'</li>'+
                  '<li><b>Type: </b>  '+file.type+'</li>'+
                  '<li><b>Data uri: </b></li>'+
                '</ul>'+
                '<pre class="textarea">'+rS+'</pre>';
            output.innerHTML = render; 
          // if image
          } else if(file.type.match(imgType)) {
            var rS2 = fR.result,
                // template
                tmpl = '<a class="btn" href="'+rS2+'" target="blank">Lihat</a>'+
                '<img class="thumb" src="'+rS2+'" alt="'+file.name+'"><ul>'+
                  '<li><b>Name: </b>  '+file.name+'</li>'+
                  '<li><b>Size: </b>  '+file.size+'</li>'+
                  '<li><b>Type: </b>  '+file.type+'</li>'+
                  '<li><b>Data uri: </b></li>'+
                '</ul>'+
                '<pre class="textarea">'+rS2+'</pre>';
            output.innerHTML = tmpl;
           // if not support
          }else{
            output.innerHTML = '<h1>Maaf file yang anda upload tidak mendukung</h1>';
          }
        };
        
        // on loaded add events
        fR.onloadend = function(e) {
          overlay.classList.add('show'); // add class
          close_overlay.onclick = function(){
            overlay.classList.remove('show'); // remove class
            fls.value = ''; // remove files
          };
        };  
        // convert to data uri
        fR.readAsDataURL(file); 
      });
    }
  };
})();

img2data.run();
Dengan memiliki tool konverter sendiri seperti ini akan menghemat waktu karena kita tidak perlu lagi mengunjungi situs lain hanya untuk mengkonversi gambar. Untuk pemasangan di blog bisa membaca artikel Cara Inline Gambar Base64 Di Blogger. Demikian sedikit tutorial ini semoga bermanfaat.