Quran Verse PNG Exporter

Github Repo: https://github.com/xsukax/Quran-Verse-PNG-Exporter

Demo: https://xsukax.github.io/Quran-Verse-PNG-Exporter

📘 Project Overview

Quran Verse PNG Exporter is a web-based tool that allows users to generate high-quality, beautifully styled PNG images of Quranic verses directly from their browser. The application connects to the public AlQuran.cloud API to fetch authentic Quranic text in Uthmani script, providing users the flexibility to select specific surahs and verses, customize appearance settings, and export them as transparent or colored images.

The tool is designed with simplicity, accuracy, and respect for Quranic text presentation. It’s ideal for designers, educators, and content creators who wish to include Quranic verses in visual materials while maintaining high aesthetic and linguistic standards.

🔒 Security and Privacy Benefits

No user data collection: The application performs all actions locally in the browser. No verse data, selections, or generated images are transmitted to external servers.
Secure API usage: Quranic data is fetched via HTTPS from the verified AlQuran.cloud API, ensuring authenticity and data integrity.
Local rendering and export: Image generation uses the client-side library html2canvas, which processes and exports the verse image entirely on the user’s device—eliminating any risk of data exposure.
No cookies or analytics tracking: The app maintains complete user privacy and transparency.

These measures ensure a trustworthy, privacy-respecting experience, fully aligned with ethical and religious sensitivity toward Quranic content.

🌟 Features and Advantages

✅ Fetch any surah and verse range from the Quran using the AlQuran.cloud API.
🖋️ Customizable typography and colors — Adjust font size, text color, and background color to fit design needs.
🧩 Transparent background option — Ideal for overlaying on other visual materials.
🕌 Option to hide Bismillah — Provides flexibility when displaying certain verses.
💾 One-click PNG export — Download verses as high-resolution PNG images.
💻 Responsive and mobile-friendly design — Smooth experience across devices.
⚡ Completely offline after loading — Once loaded, the app can work even without continuous internet connection (for already-fetched surahs).

🧭 Installation Instructions

This application is fully client-side and requires no server setup.

Option 1: Run directly

Visit the GitHub repository: Quran-Verse-PNG-Exporter
Click on index.html → Raw → right-click → Save As.
Save the file locally as index.html.
Open it in your browser by double-clicking.

Option 2: Clone via Git

git clone https://github.com/xsukax/Quran-Verse-PNG-Exporter.git
cd Quran-Verse-PNG-Exporter

Then open index.html in your preferred web browser.

Supported browsers: Chrome, Edge, Firefox, Safari (latest versions)

🧰 Usage Guide

Open the application in your browser.
From the dropdown menu, select the desired surah.
Specify the verse range (e.g., from verse 1 to verse 5).
Click 📖 “عرض الآيات” (Display Verses) to fetch and preview.
Customize the following:
- Font size (in pixels)
- Text color and background color
- Toggle background transparency
- Optionally hide Bismillah
Click 💾 “تصدير كصورة PNG” (Export as PNG) to download the rendered verse image.

🧾 Licensing Information

This project is licensed under the GNU General Public License v3.0.

💡 Contribution & Feedback

Contributions and suggestions are welcome! If you find issues or have enhancement ideas, feel free to open an issue or submit a pull request on the GitHub repository.

Author: @xsukax

Project URL: https://github.com/xsukax/Quran-Verse-PNG-Exporter

Flash News