Digital promotion card disini maksud nya pengunjung bisa mengunggah gambar mereka sendiri untuk dipasang ke template dasar yang kita sediakan.. Pada dasar nya adalah membuat watermark pada gambar..
Contoh nya seperti yang pernah saya buat di events.globallandscapesforum.org/biodiversity-2020/make-your-own-landscape-postcard/
Pengunjung dapat mengunggah foto atau gambar mereka sendiri dan untuk menambah tulisan mereka sendiri..
Dalam contoh diatas tulisan “Kyoto” di-input sendiri oleh pengunjung.. dan gambar yang bagian kiri nya adalah gambar yang diunggah sendiri oleh pengunjung..
Sedangkan gambar yang bagian kanan dan text #GLFBiodiversity dan “Greetings from” adalah merupakan template dasar nya..
Untuk kali saya akan memberi contoh pembuatan nya, namun dengan template yang berbeda..
1. Gunakan library
“Don’t reinvent the wheel” atau ”code reusability” adalah istilah yang digunakan untuk mempercepat pengerjaan dengan menggunakan modul/script orang lain yang memang bisa untuk digunakan.. Kecuali jika kita membutuhkan code yang sangat spesifik yang tidak kita dapatkan dari modul yang tersedia..
Disini kita akan menggunakan script dari sini, lengkap dengan dokumentasi nya, untuk membuat watermark pada gambar..
<script src="assets/js/vendor/watermark.min.js"></script>2. Siapkan template
Kita membutuhkan template dasar untuk digunakan agar memliki identitas yang baik.. Bisa berupa logo (misal kita ingin gunakan untuk logo perusahaan, cafe, produk, restaurant, dll) dan/atau grafis yang menggambarkan sesuatu..
Dalam kesempatan kali ini saya menggunakan logo dan default text saja..
Kita bisa menggunakann jasa desain grafis jika belum bisa membuat logo dan/atau grafis sendiri yang menarik..
3. Membuat input form
Tipe input yang diperlukan adalah text, radio dan file upload.. Text digunakan untuk nama barang atau project dan nama orang, radio input untuk menentukan warna tulisan, dan upload untuk mengunggah gambar yang diinginkan..
<form action="" id="uploadForm" method="POST">
<div class="form-group">
<label>Nama barang atau project:</label>
<input type="text" id="text" placeholder="Masukkan nama barang atau project disini…" class="form-control"/>
</div>
<div class="form-group">
<label>Nama anda:</label>
<input type="text" id="name" placeholder="Masukkan nama anda disini…" class="form-control"/>
</div>
<div class="form-group">
<label style="display:block">Warna tulisan:</label>
<div class="form-check form-check-inline ">
<input class="form-check-input" type="radio" id="color" name="radio" value="Putih" checked="checked">
<label class="form-check-label" for="color">Putih</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="color2" name="radio" value="Hitam">
<label class="form-check-label" for="color2">Hitam</label>
</div>
</div>
<div class="input-group">
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
<span>Unggah gambar disini…</span>
<input type="file" id="target" class="form-control">
</span>
</span>
</div>
</form>Lalu kita tambahkan placeholder untuk menampilkan preview hasil nya, dan untuk tombol unduh nya..
<!-- ini untuk menampilkan hasil sebelum di unduh -->
<div id="preview"></div>
<!-- untuk menampilkan tombol unduh setelah proses selesai -->
<div id="dl-dcard"></div>4. Menulis javascript function
Kemudian input data dari pengunjung kita olah dengan javascript.. Perlu set posisi text-text nya.. Untuk ini memang kita perlu coba-coba tes posisi nya sampai dapat posisi yang kita inginkan.. “x dan y” untuk posisi judul atau nama barang, “x2 & y2” untuk posisi nama pembuatnya, dan “x3 dan y3” adalah untuk posisi tagar..
var imgToMark, init = true,
x = function() {return 230},
y = function() {return 128},
x2 = function() {return 230},
y2 = function() {return 163},
x3 = function() {return 917},
y3 = function() {return 1219};Gambar yang diunggah akan bervariasi ukuran nya, sehingga perlu diset agar posisi nya sesuai.. Disini saya menggunakan ukuran 1280 x 1280px (ratio 1:1) maka ukuran yang melebihi itu akan di-adjust supaya berada di tengah template dasar nya..
var canvas = document.createElement('canvas'),
max_width = 1280,
max_height = 1280,
width = image.width,
height = image.height;
if(width >= height){
height *= max_width / width;
width = max_width;
if(height < max_height){
width *= max_height / height;
height = max_height;
}
}else{
width *= max_height / height;
height = max_height;
if(width < max_width){
height *= max_width / width;
width = max_width;
}
}
canvas.width = max_width;
canvas.height = max_height;
canvas.getContext('2d').drawImage(image,
(width > max_width ? -((width - max_width)/2) : 0),
(height > max_height ? -((height - max_height)/2) : 0),
width, height
);Setelah itu kita buat fungsi setPostcard() untuk membuat card nya sesuai dengan apa yang ada dalam dokumentasi script nya..
var dataUrl = canvas.toDataURL('image/jpeg'),
text = document.getElementById('text').value,
name = 'Oleh: ' + document.getElementById('name').value,
color = document.getElementById('color').checked ? '#fff' : '#333';
watermark([dataUrl,'assets/images/card-template.png'])
.dataUrl(watermark.image.center(1))
.render()
.dataUrl(watermark.text.atPos(x, y, text, 'bold 40px Roboto', color, 1))
.render()
.dataUrl(watermark.text.atPos(x2, y2, name, '18px Roboto', color, 0.9))
.render()
.dataUrl(watermark.text.atPos(x3, y3, '# G e r a k a n J e m a r i A k h i r P e k a n', '16px Roboto', color, 0.9))
.then(function (marked) {
var obj = new Image();
obj.src = marked;
document.getElementById('preview').innerHTML = '';
document.getElementById('preview').appendChild(obj,dataUrl);
document.getElementById('dl-dcard').innerHTML = '<br/><a class="btn btn-primary width-100" download="gerakan-jemari-akhir-pekan" href="'+obj.src+'">Klik disini untuk mengunduh</a>';
});Selanjutnya kita set agar jika ada perubahan data dalam input form, maka akan sistem akan memproses nya..
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('uploadForm').addEventListener('change', function (e) {
var input = e.target;
if ((input.type === 'text' && imgToMark) || (input.type === 'radio' && imgToMark)) {
setPostcard(imgToMark);
};
if (input.type === 'file') {
imgToMark = input.files[0];
setPostcard(imgToMark);
}
});
});Hasil tampilan nya kira-kira seperti dibawah ini..
Untuk script lengkap nya bisa diliat di github.com/reggarantai/digital-promotion-card-tool.. Ini hanya basic nya saja ya.. Silahkan dimodifikasi sendiri agar sesuai dengan apa yang diinginkan..
Kelebihan dari apa yang kita buat ini adalah bahwa proses nya terjadi di client side (perangkat pengunjung) sehingga tidak membebani server..
Untuk contoh live nya bisa dilihat di gerakanjemariakhirpekan.com
Semoga ada manfaatnya..
Wassalaamu’alaikum..
