Dalam tutorial ini, kita akan membuat aplikasi web sederhana yang memungkinkan Anda untuk menarik foto dari komputer Anda ke jendela browser, dan menerapkan filter seperti instagram di dalamnya. Untuk tujuan ini kita akan menggunakan sejumlah pustaka dan plugin JavaScript:
- Caman.js - ini adalah perpustakaan manipulasi kanvas yang kuat yang memungkinkan Anda menerapkan berbagai efek dan filter pada gambar. Muncul dengan 18 filter preset yang akan kita gunakan dalam contoh ini (Anda dapat membuat lebih banyak jika Anda mau);
- Filereader.js - ini adalah pembungkus ringan seputar aktivitas drag / drop HTML5 yang membuat mereka lebih mudah bekerja sama. Ini juga menambahkan metode ke jQuery, sehingga Anda dapat mengikat kejadian ke elemen tertentu;
- jQuery Mousewheel - Saya menggunakan plugin ini untuk menggulir wadah filter;
- Selain itu, kami menggunakan versi terbaru jQuery pada saat penulisan.
HTML
Langkah pertama adalah menulis HTML contoh:
index.html
<! DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title > Instagram seperti Filter dengan jQuery | Demozine Demo </ title >
< link href = "assets / css / style.css" rel = "stylesheet" />
<! - Sertakan font Yanone Kaffeesatz ->
< link href = "http: //fonts.googleapis .com / css? family = Yanone + Kaffeesatz: 400,200 " rel = " stylesheet "
>
< body >
< h1 > Instagram < b > Filter </ b > </ h1 >
< div id = "photo" > </ div >
< div id = "filterContainer" >
< ul id = "filters" >
< li > < a href = "#" id = "normal" >Normal </ a > </ Li >
< li > < a href = "#" id = "vintage" > Vintage </ a > </ li >
< li > < a href = "#" id = "lomo" > Lomo </ a > </ li >
< li > < a href = "#" id = "kejelasan" >Kejelasan </ a> </ Li >
< li > < a href = "#" id = "SinCity" > Sin City </ a > </ li >
<! - 14 Lebih filter pergi di sini ->
</ ul >
</ div >
<! - Libraries ->
< script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" ></ script >
< script src = "assets / js / filereader.min.js" ></ script >
< script src = "assets / js / caman.full.js" ></ script >
< script src = "assets / js / jquery.mousewheel.min.js" ></ script >
< script src = "assets / js / script.js" ></ script >
</ body >
</ html >
Selain perpustakaan yang disebutkan di intro, saya juga menyertakan file script.js yang meng-host kode yang akan kita tulis dalam beberapa saat. Di bagian kepala, saya menyertakan font Yanone Kaffeesatz dari Google Web Fonts.
JavaScript / jQuery
Untuk membuat aplikasi bekerja, kita harus melakukan hal berikut:
- Menerima gambar pada drag and drop;
- Buat elemen kanvas baru (asli), dengan ukuran maksimal 500x500px (dapat disesuaikan) dan simpan di memori;
- Dengarkan klik pada filter. Bila seseorang dipilih:
- Buat tiruan kanvas asli;
- Hapus elemen kanvas yang ada saat ini di halaman;
- Tambahkan kloning ke #photo div;
- Jika filter yang dipilih berbeda dari yang "Normal", hubungi perpustakaan Caman. Jika tidak melakukan apa-apa;
- Tandai filter yang dipilih dengan kelas "aktif".
- Memicu filter "Normal".
Sekarang kita tahu apa yang harus dilakukan, mari mulai coding!
aset / js / script.js
$ ( Function () { var maxWidth = 500 ,
maxHeight = 500 ,
foto = $ ( '#photo' ),
originalCanvas = null ,
filter = $ ( '#filters li a' ),
filterContainer = $ ( '#filterContainer' ); // Gunakan plugin fileReader untuk mendengarkan // file drag and drop pada div foto:
photo.fileReaderJS ({ on : {
load : function ( e, file ) { // Sebuah gambar telah dijatuhkan var img = $ (
'<img>' ) .appendTo (foto),
imgWidth, newWidth,
imgHeight, newHeight,
rasio; // Hapus elemen kanvas yang tertinggal di halaman // dari gambar sebelumnya drag / drops.
photo.find ( 'kanvas' ) .remove ();
filters.removeClass ( 'aktif' ); // Bila gambar berhasil dimuat, // kita bisa mengetahui lebar / tingginya:
img.load ( function (
) {
imgWidth = ini .width;
imgHeight = ini .height; // Hitung dimensi gambar baru, jadi mereka cocok // di dalam kotak maxWidth x maxHeight jika (imgWidth> = maxWidth || imgHeight> = maxHeight) { // Gambar terlalu besar, // ubah ukurannya agar sesuai dengan 500x500 kotak! if (imgWidth> imgHeight) { // Wide
ratio = imgWidth / maxWidth;
newWidth = maxWidth;
newHeight = imgHeight / rasio;
} lain {
//
Rasio tinggi atau kuadrat = imgHeight / maxHeight;
newHeight = maxHeight;
newWidth = imgWidth / rasio;
}
} else {
newHeight = imgHeight;
newWidth = imgWidth;
} // Buat kanvas asli.
originalCanvas = $ ( '<canvas>' );
var originalContext = originalCanvas [ 0 ] .getContext ( '2d' ); // Tetapkan atribut untuk memusatkan kanvas
originalCanvas.attr ({ width : newWidth,
height : newHeight
}) css ({ marginTop : -newHeight / 2 ,
marginLeft : -newWidth / 2
}); // Gambarkan gambar yang jatuh ke kanvas // dengan dimensi baru
originalContext.drawImage ( ini , 0 , 0 , newWidth, newHeight); // Kita tidak membutuhkan ini lagi
img.remove ();
filterContainer.fadeIn ();
// Trigger filter filter "normal" default.
Pertama () klik ();
}); // Tetapkan src img, yang akan / / memicu peristiwa beban saat selesai:
img.attr ( 'src' , e.target.result);
}, beforestart : function ( file ) { // terima hanya gambar. // Returning false akan menolak file tersebut. kembali / ^ image / .test (file.type);
}
}
}); // Dengarkan klik pada filter
filter.click ( fungsi ( e )
{
e.preventDefault (); var f = $ ( ini ); if (f.is ( '.active' )) {
// Terapkan filter hanya sekali return false ;
}
filters.removeClass ( 'aktif' );
f.addClass ( 'aktif' ); // Kloning kanvas var clone = originalCanvas.clone (); // Kloning gambar yang tersimpan di kanvas sebaik
kloning [ 0 ] .getContext ( '2d' ) .drawImage (originalCanvas [ 0 ], 0 , 0 );
// Tambahkan kloning ke halaman dan picu
// perpustakaan Caman di atasnya
foto.html (clone); var effect = $ .trim (f [ 0 ] .id);
Caman (kloning [ 0 ], fungsi (
) { // Jika ada efek seperti itu, gunakanlah: if (effect in this ) {
this [effect] ();
ini .render ();
}
});
}); // Gunakan plugin roda mouse untuk menggulir // menggulir div lebih intuitif
filterContainer.find ( 'ul' ) .on ( 'roda mouse' , fungsi ( e, delta ) { ini .scrollLeft - = (delta * 50 );
e. mencegahDefault ();
});
});
Contoh ini bekerja di semua browser yang mendukung file drag / drop. Beberapa filter bersifat komputasi intensif, sehingga Anda akan mendapatkan sedikit lag sebelum hasilnya tampil di layar. Saya telah membatasi lebar / tinggi maksimum gambar menjadi 500 piksel untuk mempercepat banyak hal, namun Anda dapat mengubah nilai-nilai ini sesuai dengan keinginan Anda.
0 Response to "cara membuat aplikasi kamera dengan html 5, javascript"
Post a Comment