Membuat Form Css Filter Image Editor Menggunakan JQuery

Membuat Form Css Filter Image Editor Menggunakan JQuery

Februari 27, 2017
Membuat Form Css Image Filter menggunakan JQuery
Membuat Form Css Filter Image Editor Menggunakan JQuery | Hallo shobat kali ini saya akan membagikan sebuah tutorial form untuk image editor menggunakan css filter, kamu bisa menambah efek bluer mengubah contrast gambar dan efek efek lainnya.
Baiklah jika kamu mau memasangnya silahkan ikuti tutorialnya di bawah ini.

Membuat Form Css Filter Image Editor Menggunakan JQuery

Form Ini menggunakan Script Ajax JQuery, Jadi Pastikan Template Kamu Sudah Terpasang Script ajax JQuery
1. silahkan kamu masuk ke blogger>Buat Laman Baru>dari mode Compose silahkan kamu pindahkan menjadi mode Html, Lalu kamu pastekan code berikut di Html tadi
 
<style>
/* General styles for the page */ 
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #D2D7D3;
  font-family: monospace;
  margin: 0 auto;
  width: 960px;
}

h1 {
  margin: 25px 0 25px 0;
  font-size: 40px;
  text-align: center;
}

hr {
  margin: 20px 0;
}

form {
  text-align: center;
}

/* Styles for  URL box */ 

.url-box {
  background-color: transparent;
  display: inline-block;
  height: 30px;
  border: none;
  border-bottom: 4px solid #b3b3b1;
  padding: 0px 0px 0px 20px;
  margin: 0px 0px;
  width: 50%;
  outline: none;
  text-align: center;
  font-size: 15px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

#go {
  display: inline-block;
  height: 50px;
  width: 50px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
}

/* Styles for image container*/

#imageContainer {
  border: 2px solid grey;
  border-radius: 10px;
  padding: 5px;
  width: 65%;
  max-width: 600px;
  float: left;
  margin: 20px;
}

#imageContainer img {
  border-radius: 10px;
  width: 100%;
}

/* Styles for sliders*/

.sliders {
  float: left;
  border: 2px solid grey;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
}

.sliders p {
  margin: 18px 0;
  vertical-align: middle;
}

.sliders label {
  display: inline-block;
  margin: 10px 0 0 0;
  width: 100px;
  font-size: 16px;
  color: #22313F;
  text-align: left;
  vertical-align: middle;
}

.sliders input {
  position: relative;
  margin: 10px 20px 0 10px;
  vertical-align: middle;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border-radius: 5px;
  /*required for proper track sizing in FF*/
  width: 150px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 7px;
  background: #ABB7B7;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #4B77BE;
  margin-top: -6px;
  vertical-align: middle;
}
input[type=range]:focus {
  outline: none;
}

input[type=range]:hover {
 cursor: pointer;
}


#reset {
  display: inline-block;
  height: 40px;
  width: 100px;
  background-color: transparent;
  padding: 0px;
  border: 4px solid #b3b3b1;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  outline: none;
  text-align: center;
  font-size: 20px;
  font-family: monospace;
  font-weight: 100;
  color: #000;
  margin: 0 0 10px 0;
}

.p {
  clear: both;
  text-align: center;
  padding:  40px 0 40px;
}</style>
selanjutnya tambahkan juga kode scriptnya di bawah ini
 
<script>//on click of go(submit) button, addImage() will be called
$("#go").click(addImage);

//on pressing return, addImage() will be called
$("#urlBox").submit(addImage);


// editing image via css properties
function editImage() {
 var gs = $("#gs").val(); // grayscale
 var blur = $("#blur").val(); // blur
 var br = $("#br").val(); // brightness
 var ct = $("#ct").val(); // contrast
 var huer = $("#huer").val(); //hue-rotate
 var opacity = $("#opacity").val(); //opacity
 var invert = $("#invert").val(); //invert
 var saturate = $("#saturate").val(); //saturate
 var sepia = $("#sepia").val(); //sepia

 $("#imageContainer img").css(
    "filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );

 $("#imageContainer img").css(
    "-webkit-filter", 'grayscale(' + gs+
    '%) blur(' + blur +
    'px) brightness(' + br +
    '%) contrast(' + ct +
    '%) hue-rotate(' + huer +
    'deg) opacity(' + opacity +
    '%) invert(' + invert +
    '%) saturate(' + saturate +
    '%) sepia(' + sepia + '%)'
  );
}

//When sliders change image will be updated via editImage() function
$("input[type=range]").change(editImage).mousemove(editImage);

// Reset sliders back to their original values on press of 'reset'
$('#imageEditor').on('reset', function () {
 setTimeout(function() {
  editImage();
 }, 0);
});

// adding an image via url box
function addImage(e) {
 var imgUrl = $("#imgUrl").val();
 if (imgUrl.length) {
  $("#imageContainer img").attr("src", imgUrl);
 }
 e.preventDefault(); 
}</script>
Nah di bawah ini adalah Html yang berfungsi memanggil elemen-elemen css yang di buat tadi

  
<!--Form for collecting image URL -->
<form id="urlBox" class="center">
  <input class="url-box" type="url" id="imgUrl" placeholder="Paste Url Gambar Kamu Di Sini Untuk Menampilkan Gambar">
  <input id="go" type="button" value="Go">
</form>

<hr color="grey">

<!--Controls for CSS filters via range input-->
<div class="sliders">
  <form id="imageEditor">
    <p>
      <label for="gs">Grayscale</label>
      <input id="gs" name="gs" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="blur">Blur</label>
      <input id="blur" name="blur" type="range" min="0" max="10" value="0">
    </p>

    <p>
      <label for="br">Exposure</label>
      <input id="br" name="br" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="ct">Contrast</label>
      <input id="ct" name="ct" type="range" min="0" max="200" value="100">
    </p>

    <p>
      <label for="huer">Hue Rotate</label>
      <input id="huer" name="huer" type="range" min="0" max="360" value="0">
    </p>

    <p>
      <label for="opacity">Opacity</label>
      <input id="opacity" name="opacity" type="range" min="0" max="100" value="100">
    </p>

    <p>
      <label for="invert">Invert</label>
      <input id="invert" name="invert" type="range" min="0" max="100" value="0">
    </p>

    <p>
      <label for="saturate">Saturate</label>
      <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
    </p>

    <p>
      <label for="sepia">Sepia</label>
      <input id="sepia" name="sepia" type="range" min="0" max="100" value="0">
    </p>

    <input type="reset" form="imageEditor" id="reset" value="Reset" />

  </form>
</div> 

<!--container where image will be loaded-->
<div id="imageContainer" class="center">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/stadium.jpg">
</div>

<p class="p">Demo By ID Dzgn. <a rel="nofollow" rel="noreferrer"href="http://www.sitepoint.com/build-simple-image-editor-with-css-filters-jquery" target="_blank">See article</a>.</p>
Nah jika tahap di atas sudah kamu buat sekarang silahkan klik untuk melihat apakaah formnya berhasil di buat atau tidak.
jika form masih belum muncul coba pastekan Script Ajax JQuery di bawah ini tepat di bawah Javascript yang tadi di tambahkan (No Area Script).
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
Jika dengan menambahkan script ajax di atas masih belum muncul silahkan berikan komentarnya di bawah ini

Artikel Terkait

Next
« Prev Post
Previous
Next Post »

# Saya akan coba merespon komentar baru secepatnya.
# Harap berkomentar dengan bahasa baku tanpa singkatan.
# Komentar promosi, spam, dan komentar satu kalimat yang tidak bermutu akan saya hapus langsung.
# Jangan menggunakan nama pengomentar dengan nama yang berbau porno, judi, dan yang negatif lainnya.
# Setiap komentar akan dimoderasi secara manual sebelum muncul. EmoticonEmoticon

Langgan: Catat Ulasan (Atom)