Quran Verse PNG Exporter

# Quran Verse PNG Exporter

**Github Repo:** [https://github.com/xsukax/Quran-Verse-PNG-Exporter](https://github.com/xsukax/Quran-Verse-PNG-Exporter)

**Demo:** [https://xsukax.github.io/Quran-Verse-PNG-Exporter](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

1. Visit the GitHub repository: [Quran-Verse-PNG-Exporter](https://github.com/xsukax/Quran-Verse-PNG-Exporter)
2. Click on `index.html` → `Raw` → right-click → **Save As**.
3. Save the file locally as `index.html`.
4. Open it in your browser by double-clicking.

### Option 2: Clone via Git

“`bash
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

1. **Open the application** in your browser.
2. From the dropdown menu, **select the desired surah**.
3. Specify the **verse range** (e.g., from verse 1 to verse 5).
4. Click **📖 “عرض الآيات” (Display Verses)** to fetch and preview.
5. Customize the following:

* Font size (in pixels)
* Text color and background color
* Toggle background transparency
* Optionally hide Bismillah
6. 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](https://github.com/xsukax/Quran-Verse-PNG-Exporter).

—

**Author:** [@xsukax](https://github.com/xsukax)

**Project URL:** [https://github.com/xsukax/Quran-Verse-PNG-Exporter](https://github.com/xsukax/Quran-Verse-PNG-Exporter)