hasil pencarian script convert Gambar
kode Script membuat script convert Gambar terbaru!
Salin dan tempel kode script convert Gambar ini di blog kamu,lihat kode script di bawah..
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Converter Gambar Jadi Sketsa</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 20px;
background: #f4f4f4;
}
h2 {
margin-bottom: 20px;
}
canvas {
max-width: 100%;
border: 2px dashed #ccc;
margin-top: 20px;
}
input[type="file"] {
margin-top: 10px;
}
.btn {
margin-top: 15px;
padding: 8px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>🖼️ Converter Gambar Jadi Sketsa</h2>
<input type="file" accept="image/*" onchange="convertToSketch(this)">
<br>
<canvas id="canvas"></canvas>
<br>
<a id="downloadBtn" class="btn" style="display:none;" download="sketsa.png">⬇️ Download Sketsa</a>
<script>
function convertToSketch(input) {
const file = input.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
// 1. Gambar asli ke canvas
ctx.drawImage(img, 0, 0);
// 2. Ambil data pixel & ubah ke sketsa
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
// Hitung grayscale
const gray = 0.3 * r + 0.59 * g + 0.11 * b;
// Buat efek sketsa dengan membalik warna (invert)
const sketch = 255 - gray;
data[i] = data[i + 1] = data[i + 2] = sketch;
}
ctx.putImageData(imageData, 0, 0);
// Tampilkan tombol download
const downloadBtn = document.getElementById("downloadBtn");
downloadBtn.href = canvas.toDataURL("image/png");
downloadBtn.style.display = "inline-block";
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
Komentar untuk Kode script convert Gambar