Tools Generator Gambar

body { font-family: 'Google Sans', 'Segoe UI', sans-serif; background: #fff; } #background, .tombol-convert, .tombol-download { display: none; } .thumbnail-wrapper { position: relative; display: block; margin: auto; padding: 20px 10px; max-width: 1000px; width: calc(100% - 20px); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; line-height: 1.5; } .formthumb { position: relative; display: block; margin: 10px 0; padding: 0; width: 100%; } .formthumb label { position: relative; display: block; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: #444; } .formthumb input, .formthumb select { position: relative; display: block; margin: auto; padding: 10px 15px; width: calc(100% - 30px); background: #fff; color: #444; border: 1.5px solid #007bff; outline: none; border-radius: 5px; } .formthumb select { width: 100%; } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } ::-webkit-file-upload-button { background: #007bff; color: #fff; padding: 5px 10px; border: none; border-radius: 5px; outline: 0; cursor: pointer; } .background { width: 900px; height: 472px; color: #fff; overflow: hidden; position: relative; z-index: 1; opacity: 1; visibility: visible; user-select: none; margin: 30px auto; } .content-container { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; max-height: 420px; color: #fff !important; opacity: 1 !important; } .footer-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-family: 'Google Sans', 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; text-shadow: 4px 2px 5px rgb(0 0 0 / 20%); -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 999; } #mistar { width: 60px; height: 10px; display: inline-block; background: #fff; margin-right: 15px; vertical-align: -3px; } #output-label { position: relative; display: inline-block; font-family: 'Google Sans', 'Segoe UI', sans-serif; font-size: 20px; font-weight: 700; text-shadow: 4px 2px 5px rgb(0 0 0 / 20%); z-index: 999; vertical-align: top; } .title-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 auto; width: 100%; height: 400px; font-size: 13px; margin-bottom: 20px; transition: all 0.5s; } #output-judul { font-size: 50px; font-family: 'Google Sans', 'Segoe UI', sans-serif; font-weight: 700; padding-right: 10px; line-height: 1.2; text-shadow: 4px 2px 5px rgb(0 0 0 / 20%); overflow: hidden; z-index: 999; opacity: 1; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 auto; width: calc(100% - 300px); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; } #output-image { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 auto; width: 300px; min-height: 250px; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 auto; border-radius: 7px; } #output-nama { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #content-container { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; z-index: -999; } #canvas { position: relative; display: block; margin: 20px auto; text-align: center; } .tombol-convert, .tombol-download { position: relative; margin: 20px auto; text-align: center; } button#convert-image,button#download-image,button#reset-image{ color: #fff; background-color: #007bff; display: inline-block; text-align: center; cursor: pointer; outline: none; border: none; border-radius: 6px; font-size: 14px; font-weight: bold; padding: 7px 15px; margin: 0 auto; } Warna Background Pilih Warna Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Grey Blue Grey Upload Image Label Postingan Judul Postingan Author Nama Blog Convert Image Reset Image Download Image var input = document.getElementById("tumbnail-form"), namaBlog = document.getElementById("nama-blog"), judul = document.getElementById("judul"), author = document.getElementById("author"), label = document.getElementById("label"), bgColor = document.getElementById("bg-color"); input.onkeyup = function () { document.getElementById("output-label").innerHTML = label.value; document.getElementById("output-judul").innerHTML = judul.value; document.getElementById("output-nama").innerHTML = namaBlog.value; document.getElementById("output-author").innerHTML = "@" + author.value; }; document.getElementById("bg-color").addEventListener("change", function () { var background = "#fff #d32f2f #c2185b #7b1fa2 #512da8 #303f9f #1976d2 #0288d1 #0097a7 #00796b #388e3c #689f38 #afb42b #fbc02d #ffa000 #f57c00 #e64a19 #5d4037 #616161 #455a64".split(" ")[bgColor.selectedIndex]; document.getElementById("content-container").style.backgroundColor = background; document.getElementById("background").style.display = "block"; document.querySelector(".tombol-convert").style.display = "block"; }); document.getElementById("upload").onchange = function(event) { var output = document.getElementById('output-image'); output.style = 'background:url("'+URL.createObjectURL(event.target.files[0])+'")'; output.onload = function() { URL.revokeObjectURL(output.style); } }; document.getElementById('convert-image').onclick = function (){ html2canvas(document.querySelector(".content-container")).then(canvas => { document.getElementById('canvas').appendChild(canvas); }); document.querySelector(".tombol-download").style.display = "block"; } document.getElementById('reset-image').onclick = function (){ document.getElementById('canvas').innerHTML = ""; document.querySelector(".tombol-download").style.display = "none"; } document.getElementById('download-image').onclick = function(){ var title = document.getElementById("judul").value.split(" ").join("-"); console.log(title) var link = document.createElement('a'); link.download = title+'.png'; link.href = document.querySelector('canvas').toDataURL(); link.click(); }