Selamat pagi teman-teman, jumpa lagi dengan mimin, duh akhir-akhir ini mimin sebagai freelance programer rada sibuk, banyak request dari client-client mimin, heheh kali ini mimin ingin berbagi pengalaman mimin tentang membuat gambar dari html, jadi intinya ada halaman web, tentunya web HTML memiliki DOM kan, dengan memanfaatkan dom ini proses seleksi gambar akan lebih tepat daripada merender seluruh halaman menjadi gambar. kuranglebih tujuan kerjanya seperti gambar berikut, mimin hanya ditugaskan merubah format html menjadi gambar entah format .jpg atau .png, yang terpenting yang saya rubah adalah area yang sudah ditentukan (di dalam format html dengan dom id=content)
oke untuk langkah mudah merubah html menjadi gambar web based adalah seperti berikut
1. Buat file baru di dalam folder htdocs anda, misal convert.php dan copy pastekan perintah berikut ini
<html>
<head>
<title>Mitra Ide</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>
<body>
<br><br><br>
<div class="col-lg-4">
<div id="content" style="border-style: solid;border-color: blue;background-color: orange;">
<h1>Mitra Ide</h1>
<h4>Contoh merubah tag html menjadi jpg</h4>
</div>
<br><br><br>
<button id="prosesMenjadiGambar" type="button" class="btn btn-primary top"> Rubah menjadi gambar</button>
<br><br><br><br><br>
<div id="img" style="display:none;">
<img id="hasilGambar"/>
</div>
</div>
<script>
$(function() {
$("#prosesMenjadiGambar").click(function() {
html2canvas($("#content"), {
onrendered: function(canvas) {
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
$("#hasilGambar").attr('src', imgsrc);
$("#img").show();
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "server.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('Sukses');
});
}
});
});
});
</script>
</body>
</html>
kemudian masih di folder yang sama buat file baru dengan nama server.php , lalu copykan code berikut
<?php
define('UPLOAD_DIR', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . "hasilOutput" . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Terjadi error, mohon cek kembali';
?>
2. Masih di dalam folder yang sama buat sub folder baru dengan nama images
3. Refresh browser teman-teman, seharusnya akan muncul tampilan seperti berikut
sedangkan untuk file gambarnya terletak di dalam folder images
Bila anda pengguna windows seharusnya sudah berjalan, namun bila anda pengguna linux mungkin akan gagal karena linux menerapkan perizinan di setiap filenya,
Buka terminal dan masuk mode rood lalu ketikkan perintah berikut :
chmod -R 777 <namaFolder>
chown -R www-data.www.data <namaFolder>
Catatan : cara kerja dari metode ini adalah, proses akan merekam tampilan dari browser cliant, kemudian mengirimnya dengan cara ajax kepada server.php , nah dari server.php ini akan merubah base64 (string) menjadi image dan menyimpannya.
Kekuarangan : Karena cara ini memanfaatkan cliant based, tentu akan memiliki kelemahan, contohnya saat pada teknologi responsiv, cliant menggunakan layar kecil atau besar (ukuran layar pada browser clinat juga akan berpengaruh terhadap hasil output gambar)
Kekurangan lain adalah dengan metode ini tidak mensupport scale secara penuh. maksudnya di dalamn css kan ada transfor:scale(0.5) misalnya, dia bisa mensupport untuk gambar atau border, sedangkan untuk font akan hancur (tidak mensupport). untuk mengatasi agar bisa discale akan mimin posting di di bawah ini,
1. Pada file convert.php rubah beberapa code menjadi seperti berikut ini
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<br><br><br>
<div class="col-lg-4">
<div id="content" style="border-style: solid;border-color: blue;background-color: orange;">
<h1>Mitra Ide</h1>
<h4>Contoh merubah tag html menjadi jpg</h4>
</div>
<br><br><br>
<button id="prosesMenjadiGambar" type="button" class="btn btn-primary top"> Rubah menjadi gambar</button>
<br><br><br><br><br>
<div id="img" style="display:none;">
<img id="hasilGambar"/>
</div>
</div>
<script>
$('#prosesMenjadiGambar').click(function() {
html2canvas($('#content')[0], {
scale:0.5
}).then(function(canvas) {
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
console.log('loadDone');
$("#hasilGambar").attr('src', imgsrc);
$("#img").show();
var dataURL = canvas.toDataURL();
console.log(dataURL);
$.ajax({
type: "POST",
url: "server.php",
data: {
imgBase64: dataURL
}
}).done(function (o) {
console.log('saved');
});
});
});
</script>
ada perbedaan pada librari html2canvas.js dan file di dalam <script></script> hanya itu perbedaannya,
2. Refresh browser teman-teman seharusnya akan muncul seperti berikut ini
Bisa dilihat, proses scale 0.5 telah berhasil baik background maupun dari font/text untuk file hasil output .jpg masih sama, terletak di folder images. heheh
Oke cukup sekian pembahasan kali ini. mimin telah menggunakan metode ini dan berjalan dengan baik untuk mimin
