Merotasi memutar gambar dengan jquery php

Hallo blogger kali ini saya akan menjelaskan tentang bagaimana cara merotasi atau memutar gambar menggunakan php dan jquery. rotasi image sering kali digunakan apabila kita menggunakan fitur upload gambar namun user awam tidak tahu cara memutar / merotate gambar secara manual. sehingga fitur rotate sangat dibutuhkan. bahkan facebook juga sudah menggunakan fitur ini. lansung saja saya akan membeikan script rotate gambar menggunakan php dan jquery.

untuk membuat file ini membutuhkan

  1. Gambar
  2. jquery bisa kita download atau mengambil dari code.jquery.com
  3. dll

Baca juga cara membuat barcode dengan php dan jquery

<html>
<head>
<title>Memutar gambar</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script> // import script jquery
<script>
// fungsi putargambar
function putarGambar(degree) {
    var angle = degree || 0;
    $('#idgambar').css({'transform': 'rotate(' + angle + 'deg)'}); // mengubah css berdasarkan idgambar
    $('#idgambar').data('angle', angle + 90); //mengubah angle berdasarkan idgambar
}
</script>
<style>
#demo-image{padding:25px 10px;}
.btnRotate {padding: 5px 10px;background-color: #09F;border: 0;color: #FFF;cursor: pointer;}
</style>
</head>
<body>
<div>
<label>Rotate Image:</label>
<input type="button" value="90" onClick="putarGambar(this.value);" /> // putar 90 derajat
<input type="button" value="-90" onClick="putarGambar(this.value);" /> // putar 240 derajat
<input type="button" value="180" onClick="putarGambar(this.value);" /> // putar 180 derajat
<input type="button" value="360" onClick="putarGambar(this.value);" /> // putar 360 derajat
//button untuk mengubah anggel gambar
</div>
<div><img src="namagambar" id="idgambar" /></div>
</body>
</html>

NB :

  • simpan script diatas pada file html/php
  • ubah src namagambar menjadi tempat dan nama gambar anda disimpan "image/gambar.jpg"

Baca juga menghilangkan attribute style dengan menggunakan jquery

cukup mudah bukan untuk rotasi gambar, cukup sekian postingan saya kali ini tentang memutar / rotasi gambar menggunakan php dan jquery. apabila artikel ini bermanfaat dan ada yang ingin ditanyakan silahkan masukkan ke kolom komentar terima kasih :)

Share this

Related Posts

Previous
Next Post »

1 komentar:

komentar
2 Maret 2017 10.00 delete

mas mau nanya, gimana cara nya ketika gambar diputar tidak kembali lg keawal setelah direfresh?

Reply
avatar