sirilius / watermarkktp

Watermark KTP is a free and secure web-based tool that allows you to add a watermark to your scanned KTP (Indonesian ID card).

Watermark KTP

Watermark KTP is a free and secure web-based tool that allows you to add a watermark to your scanned KTP (Indonesian ID card). The watermark added is in the form of text that contains the date and purpose of the KTP scan. For example, "E-wallet verification, 10-10-2021". This tool is useful in preventing data misuse and fraud.

Usage

Visit https://watermarkktp.com/cara-pakai/ to read the complete documentation.

Dependencies

• Node.js: Backend JavaScript runtime environment
• npm: Used to manage and install the project's dependencies.
• Eleventy: Static site generator used to build Watermark KTP.
• Prettier: Tool to ensure code follows formatting standards and consistent code writing.
• Tailwind: Styling framework used to manage the page layout.

Installation

To run Watermark KTP locally, follow these steps:

1. Make sure you have Node.js (version 12 or newer) and npm (Node Package Manager) installed on your system.
2. Clone this repository to your local system:

   git clone https://github.com/sirilius/watermarkktp.git

3. Navigate to the project directory:

   cd watermarkktp

4. Install project dependencies by running the following command:

   npm install

5. Build the project assets, including Eleventy and Tailwind CSS configurations, by running the following command:

   npm run build

6. Run the project locally with the command:

   npm run dev

This will start a local development server using Eleventy. You can access Watermark KTP in your browser at http://localhost:8080/.

Features

• Easy-to-use interface: Watermark KTP provides a user-friendly interface, allowing users to quickly and easily add a watermark to scanned ID cards.
• Watermark customization: Users can customize the watermark by selecting the font, position, size, color, rotation, and transparency.
• Reset watermark: Users can reset the watermark settings to the default with a single click.
• Draggable watermark: Users can drag and drop the watermark to the desired location within the scanned ID card.
• Presets: Simplifies the process for users with automatic watermark creation in just one click.
• Draggable image: Users can add an ID card scan by dragging and dropping the image file into the tool.
• Download image: Users can save the watermark-applied ID card scan as a PNG image.

Privacy Policy

We highly value the privacy of users' personal data in Watermark KTP. Here are some important points from our privacy policy:

• Watermark KTP never sells, misuses, or exploits anyone's ID card data.
• Watermark KTP is a simple tool to add text (watermark) to ID card scans as a means of marking and securing personal data. We never send users' uploaded images out of their browser.
• All processing in Watermark KTP is entirely done on the client-side (your side). We never send any files uploaded by users out of their browser.
• We are committed to providing secure and user friendly tools for the community. Watermark KTP is one of our steps towards raising awareness of personal data security in the digital world.

If you have any questions regarding privacy in Watermark KTP, please contact us by sending a message via Twitter: @SiriliusKevin

Contributing

If you are interested in contributing to Watermark KTP, please read the contributing guidelines for guidelines and steps to follow.

Translations

• Indonesian / Bahasa Indonesia

License

Watermark KTP is licensed under the MIT License. See LICENSE for more information.

Donations

If you find Watermark KTP useful and would like to support further development, you can make a donation as a token of appreciation. Your donation will be greatly appreciated and contribute to the maintenance, updates, and improvements of this tool.

To make a donation, please visit the following donation page:

• https://watermarkktp.com/donate/

watermarkktp's Issues

feat: Add (website) to home screen

• https://stackoverflow.com/questions/38826397/add-to-home-screen-functionality-using-javascript

Add font selection

Can we add font selection for the watermark?

Draggable file

[Feature Request] Multilanguage Support

It would be a nice idea to have multilanguage support for this site. So non-Indonesian citizens can also enjoy this service!
I'm adding English-ltranslated README to my own fork. And if you agree, I will make a PR for it.

Anyways, hello! I'm Hendra Manudinata, a 14 y.o teenager, just like you! Nice to meet you, indirectly.

---

Akan menjadi ide bagus jika ditambahkan untuk situs ini. Jadinya, warga non-Indonesia juga dapat menikmati layanan ini.
Saya lagi menambah terjemahan Inggris untuk README ke fork personal. Dan jika Kakak setuju, saya akan buat PR untuk itu.

Oh iya, halo, Kak! Saya Hendra Manudinata, remaja 14 tahun, sama seperti Kakak. Senang dapat bertemu Kakak, secara tidak langsung.

angka rotasinya gak jalan?

expected UX: onclick output can also input a file

Input watermark opacity

[REQUEST] Remove white background when download

So, the downloaded picture are contains white background, this is bad, because I want my original picture still become original

Failed Reset Position

Halo @sirilius
sepertinya ada bug saat reset posisi teks, posisi teks tidak kembali ke posisi awal

Specify input file to only accept image

Hello @sirilius

Currently, the input file doesn't have an accept attribute that specifies file types. It makes file browser show any files to the user. Since we only need an image, we can specify it such as accept="image/jpeg,image/png" or accept="image/*", so users can easily find the image that they want to use.

Menggunakan bundler untuk kemudahan development

Pada saat development ketika sedang mengubah js agak merasa kesulitan, dimana mesti jalanin npm run min setiap kali punya perubahan di js atau di css. Cara lain mengubah path js/css nya di htmlnya ke versi yang belum di minified, tapi akan jadi masalah ketika htmlnya ikutan kena commit. Saran pake bundler atau frontend tooling kayak vite biar lebih gampang develop web ini. Vite ini nantinya bakalan minified nggak js doang, html sama css udah otomatis di minfied ukurannya pada saat mode production, support juga di deploy ke netlify. Pada saat ada perubahan di mode dev, dia otomatis refresh halaman, nggak perlu capek-capek lagi refresh manual

refactor: Migrate to dynamic templating

Backend & Technology monggo creator yang menentukan

Add hex color input to change watermark color

output canvas blank in mobile view

Confusing behavior on auto-watermarking

Issue

Setelah update terbaru, saya melihat ada fitur baru yang otomatis menambahkan text Verifikasi, 26-7-2022 secara dinamis ke caption watermark, ini bagus, tapi pengaplikasiannya mungkin masih kurang tepat:

beberapa bug(?) yang ditemukan:

1. CTRL+R
    -> tulis caption watermark
    -> tambah gambar 
    -> watermark yang sudah ditulis otomatis terganti menjadi *Verifikasi, 26-7-2022*

2. CTRL+R
    -> klik "reset"
    -> caption watermark otomatis terganti menjadi *Verifikasi, 26-7-2022*, padahal awalnya kosong

Related code:

watermarkktp/src/_includes/js/watermark.js

Lines 215 to 236 in 2eaa0de

	resetButton.addEventListener("click", function () {
	const dateObj = new Date();
	let month = dateObj.getMonth() + 1;
	let day = dateObj.getDate();
	let year = dateObj.getFullYear();
	const newdate = "Verifikasi, " + day + "-" + month + "-" + year;
	watermarkTemplate.innerText = newdate;
	textValue = watermarkTemplate.innerText;
	inputWatermark.value = newdate;
	inputColor.value = "#000000";
	inputTextColor.value = "#000000";
	inputRotate.value = "-15";
	inputTextRotate.value = "-15";
	inputOpacity.value = "0.3";
	inputTextOpacity.value = "0.3";
	selectFont.value = "times New Roman";
	selectPosition.value = "center";
	selectFontSize.value = "60";

Suggestion

Yang pertama, bagaimana kalau kita menambahkan field baru diatas field Font, nama field nya Template Watermark, contoh sebagai berikut ini:

Kedua, by default, biarkan caption watermark kosong, supaya pengguna2 yang sebelumnya tidak bingung dengan perubahan terbaru ini, apalagi pengguna2 tua seperti saya yang kadang masih minta tolong orang untuk mempelajari aplikasi

jadi semisal ada perubahan value tetap atas dasar consent pengguna

Peningkatan Fitur

Ini adalah daftar fitur-fitur yang akan ditambahkan ke Watermark KTP

• Menambahkan input transparansi watermark
• Pengaturan kemiringan watermark
• Membenarkan width & height canvas untuk mobile view
• Menambahkan placeholder untuk canvas
• Mendukung tampilan mobile
• Menambahkan keterangan privasi
• Membuat background gambar yang digenerasi tidak transparan
• Membenarkan draggable teks untuk tampilan mobile
• Draggable file
• Penambahan tombol reset
• Mengganti <input> dengan <textarea> untuk opsi teks watermark
• Dukungan new line untuk opsi teks watermark
• Membuat header
• Menambahkan metadata
• Mengganti logo

Reset Input rotasi, transparansi

Ketika button 'Reset' di click, input rotasi dan transparansi tidak kembali ke value 0

create release

might start with 0.x.x ? or 1.x.x already? (depends on creator)

anyway: https://semver.org/ , bagus buat dipelajari