Pada artikel kali ini saya akan menjelaskan bagaimana cara untuk membuat fitur crop dengan menggunakan plugin Jquery. Penjelasan di sini hanya akan meliputi penggunaan dasar saja dari keseluruhan fitur yang sebenarnya bisa dilakukan oleh plugin tersebut.
#INSTALASI
Cara untuk melakukan instalasi adalah dengan melakukan download pada link berikut ini https://github.com/fengyuanchen/jquery-cropper. Di sini saya menggunakan plugin Jquery Cropper. Caranya adalah dengan menekan tombol Clone or Download berwarna hijau di sebelah kanan atas dan kemudian pilih Download ZIP. Lakukan ekstrak pada file hasil download tadi.
#CARA PEMAKAIAN
Berikut ini adalah source code lengkap comtoh pemakaian yang saya buat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jquery Cropper</title>
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<img id="image" src="img/picture.jpg" class="img-responsive">
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-6">
<a href="javascript:void(0);" download="cropped.jpg" class="btn btn-block btn-info" id="crop">Crop</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
<script src="./jquery-cropper-master/dist/jquery-cropper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
<script>
var $image = $('#image');
$image.cropper({
aspectRatio: 16 / 9,
});
$('#crop').on('click', function(){
var $image = $('#image');
var cropper = $image.data('cropper');
var url = cropper.getCroppedCanvas().toDataURL('image/jpeg').replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
$(this).attr('href', url);
})
</script>
Seperti biasanya di sini saya menggunakan bootstrap untuk tampilannya agar mempunyai hasil akhir yang responsive. Yang perlu diperhatikan di sini adalah untuk menggunakan plugin ini pada program ada beberapa file yang harus di load pada program. Dalam contoh kode di atas file-file tersebut adalah sebagai berikut :
- <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
- <script src="./jquery-cropper-master/dist/jquery-cropper.js"></script>
File yang perlu diload di dalam program adalah file css dari cropper. Kemudian cropper.js dan juga jquery-cropper.js. Selain itu anda juga tentu saja perlu melakukan load file jquery.js nya sebagai dasar dari plugin jquery ini.
Contoh kode di atas akan menampilkan sebuah canvas dengan gambar yang di load secara default. Dan sebuah button untuk melakukan crop sesuai dengan area yang dipilih pada gambar tersebut. Untuk lebih jelasnya dapat dilihat pada gambar di bawah ini.
Cara untuk mengubah sebuah div menjadi cropper terdapat pada script di bawah ini
Contoh kode di atas akan menampilkan sebuah canvas dengan gambar yang di load secara default. Dan sebuah button untuk melakukan crop sesuai dengan area yang dipilih pada gambar tersebut. Untuk lebih jelasnya dapat dilihat pada gambar di bawah ini.
Cara untuk mengubah sebuah div menjadi cropper terdapat pada script di bawah ini
var $image = $('#image');
$image.cropper({
aspectRatio: 16 / 9,
});
Secara default anda bisa membuat area yang dipilih dengan menggunakan aspek rasio seperti contoh di atas. Untuk option-option lengkapnya dapat anda baca pada link berikut https://github.com/fengyuanchen/cropperjs#options. Sedangkan script untuk melakukan crop dan mendownload file terdapat pada script di bawah ini
Secara default anda bisa membuat area yang dipilih dengan menggunakan aspek rasio seperti contoh di atas. Untuk option-option lengkapnya dapat anda baca pada link berikut https://github.com/fengyuanchen/cropperjs#options. Sedangkan script untuk melakukan crop dan mendownload file terdapat pada script di bawah ini
$('#crop').on('click', function(){
var $image = $('#image');
var cropper = $image.data('cropper');
var url = cropper.getCroppedCanvas().toDataURL('image/jpeg').replace(/^data:image\/[^;]+/, 'data:application/octet-stream');
$(this).attr('href', url);
})
Saat melakukan click pada button crop, kode akan mengambil data cropper tersebut dan mengubahnya menjadi data gambar dengan menggunakan perintah canvas toDataURL. Sedangkan untuk menentukan nama file hasil download terdapat pada kode berikut
Saat melakukan click pada button crop, kode akan mengambil data cropper tersebut dan mengubahnya menjadi data gambar dengan menggunakan perintah canvas toDataURL. Sedangkan untuk menentukan nama file hasil download terdapat pada kode berikut
<a href="javascript:void(0);" download="cropped.jpg" class="btn btn-block btn-info" id="crop">Crop</a>
Terdapat html property download yang digunakan untuk menghasilkan nama file hasil download sesuai dengan yang didefinisikan pada property tersebut.
Dengan plugin ini anda dapat juga menggunakan fungsi drag and drop pada mouse untuk membuat area crop yang diinginkan. Selain itu juga terdapat fitur zoom in dan zoom out dengan menggunakan scroll wheel pada mouse. Untuk demo lengkapnya dapat anda lihat pada link berikut https://fengyuanchen.github.io/jquery-cropper/
Demikianlah penjelasan saya pada artikel Tutorial PHP - Membuat Crop Gambar dengan Jquery Cropper ini, Semoga penjelasan singkat saya dapat mudah dimengerti dan dipahami serta dapat anda modifikasi sendiri sesuai dengan program yang anda buat. Selamat mencoba
Tutorial PHP - Membuat Crop Gambar dengan Jquery Cropper
Reviewed by Donny Winarto
on
April 16, 2019
Rating:
Reviewed by Donny Winarto
on
April 16, 2019
Rating:
ingin mendapatkan uang banyak dengan cara cepat ayo segera bergabung dengan kami di f4n5p0k3r
ReplyDeletePromo Fans**poker saat ini :
- Bonus Freechips 5.000 - 10.000 setiap hari (1 hari dibagikan 1 kali) hanya dengan minimal deposit 50.000 dan minimal deposit 100.000 ke atas
- Bonus Cashback 0.5% dibagikan Setiap Senin
- Bonus Referal 20% Seumur Hidup dibagikan Setiap Kamis
Ayo di tunggu apa lagi Segera bergabung ya, di tunggu lo ^.^