Quran Image Creator

بعون الله وتوفيقه، أقدم لكم مكتبة مشاركة الآيات القرآنية كصورة.

---

المحتويات

• المميزات
• البدء السريع
• المرجع API
• معرض الصور
• المساهمة
• الترخيص

---

المميزات

#	الميزة
1	6 روايات قرآنية: حفص عن عاصم (4 مصاحف)، شُعبة، ورش، قالون، الدُّوري، السوسي
2	تخصيص كامل: ألوان الخلفية والنص، الخطوط، رقم الصفحة، توسيط الآيات
3	تفسير الآيات: إضافة تفسير مع خط مستقل لكل تفسير
4	تحديدات متعددة: آيات من سور مختلفة في صورة واحدة
5	ويب + Node.js: يعمل في المتصفح بدون مكاتب إضافية، و @napi-rs/canvas لـ Node.js
6	صيغ متعددة: png / jpeg / avif / webp كـ blob / buffer / base64
7	حجم خفيف: تحميل البيانات عند التشغيل ثم تخزينها في .cache للمعالجات القادمة
8	دقة المواضع: طباعة كل كلمة في موضعها كما في المصحف (قابل للإيقاف)

المصاحف المتوفرة

لحفص: المدينة 1405 هـ | 1422 هـ | 1439 هـ | المجود

لباقي الروايات: شُعبة | ورش | قالون | الدُّوري | السوسي

تنويه: المصحف المجود لا يدعم الخلفية الداكنة بعد — استخدم خلفية فاتحة.

مصادر البيانات

مجمع الملك فهد و QUL.

---

البدء السريع

التثبيت

npm install quran-image-creator
pnpm add quran-image-creator
yarn add quran-image-creator

Node.js

const { writeFileSync } = require("fs");
const QuranImageCreator = require("quran-image-creator");

(async () => {
  const { data } = await QuranImageCreator(
    { selection: [{ chapter: 1, from: 1, to: 7 }], layout: "madinah-tajweed" },
    "image/webp",
    "buffer",
  );
  writeFileSync("output.webp", data);
})();

المتصفح

import QuranImageCreator from "quran-image-creator/esm";

const canvas = document.querySelector("canvas");
canvas.width = 1024;
canvas.height = 1024;

const { data } = await QuranImageCreator(
  { selection: [{ chapter: 1, from: 1, to: 7 }], layout: "madinah-1405" },
  "image/webp",
  "base64",
  canvas,
);

const img = new Image();
img.src = data;
img.onload = () => {
  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

لمزيد من الأمثلة: /examples.

---

المرجع API

التوقيع

QuranImageCreator(
  options: QuranImageCreatorOptions,
  mime: "image/png" | "image/jpeg" | "image/webp" | "image/avif",
  returnType: "blob" | "buffer" | "base64",
  canvasEl?: HTMLCanvasElement,
): Promise<{ width: number; height: number; data: Blob | Buffer | string }>

الخيارات

options.selection[]: مجموعة الآيات المختارة للتصوير.
options.selection[].chapter: رقم السورة.
options.selection[].from, options.selection.to: تحديد الآيات (اختياري)
options.selection[].exegesis: رمز التفسير لهذه المجموعة (اختياري).
options.layout: المصحف، اختياري default: madinah-1439.
options.theme.backgroundColor: لون الخلفية. (اختياري)
options.theme.foregroundColor: اللون الأساسي (اختياري)

تنويه: لون النصوص يتم تحديدها تلقائيًا بنائًا على لون الخلفية، إما أبيض أو أسود.

options.width: تغيير عرض الصورة (اختياري)

تنويه: يتم تغيير عرض الصورة ليعرض التفاسير بالشكل المناسب.

options.loadExegesis: لتسجيل دوال الحصول على نصوص التفاسير (اختياري)
options.exegesisFont: تخصيص خط التفسير (اختياري). default: Kitab bold.
options.loadPageNumber.pagesEnd: هل يتم طبع رقم الصفحة نهاية كل صفحة؟ (اختياري).
options.loadPageNumber.sectionsEnd: هل يتم طبع رقم الصفحة نهاية كل مجموعة تحديد؟ (اختياري).
options.centerVerses: هل يتم وزن الأسطر كلها إلى المنتصف بدلًا من اليمين والشمال؟ (اختياري).
options.ignoreWordsPosition: هل يتم إلغاء ترتيب الكلمات بالترتيب المعروف للمصحف؟ (اختياري)
options.assetsDirectory: مسار مجلد تخزين الخطوط وبيانات المصاحف، لتجنب تحميلها في كل عملية.

تنويه: ليس هناك أي أهميه لoptions.assetsDirectory في الweb.

المصاحف

تستطيع اختيار أي قيمة من هذه المصاحف المتوفرة واستخدامها في options.layout

القيمة	المصحف
"madinah-1405"	المدينة 1405 هـ
"madinah-1422"	المدينة 1422 هـ
"madinah-1439"	المدينة 1439 هـ
"madinah-tajweed"	المجود
"warsh"	ورش
"qalon"	قالون
"shobah"	شُعبة
"doori"	الدُّوري
"sosi"	السوسي

---

مثال للمكتبة جامع

import fs from "node:fs";
import QuranImageCreator from "quran-image-creator";

QuranImageCreator(
  {
    // default: madinah-1439.
    layout: "warsh",
    selection: [
      { chapter: 1 },
      { chapter: 2, from: 1, to: 15 },
      // exegesis: KEY.
      { chapter: 43, from: 64, to: 64, exegesis: "mukhtasar" },
    ],
    loadExegesis: {
      // will only load for 43:64 verse, for using this function in the selection.
      // use still can use your own database, online requests will make the operation slower.
      mukhtasar: async ({ chapterId, verseId }) => {
        const response = await fetch(
          `https://tafsir.app/get.php?src=mukhtasar&s=${chapterId}&a=${verseId}&ver=1`,
        );
        const { data } = await response.json();

        return {
          name: "المختصر في التفسير",
          content: data,
        };
      },
    },
    // default value
    width: 1920,
    // custom font for exegesis (default: Kitab bold)
    // you need to load it in the canvas library
    // in node.js: use `GlobalFonts` from `@napi-rs/canvas`.
    // in web: use css font load or using `FontFace` JS API.
    exegesisFont: "Arial",
    // default: false.
    centerVerses: false,
    // default: false.
    ignoreWordsPosition: false,
    // default: $CWD/.cache
    assetsDirectory: "/home/ali-ghamdan/.cache/quran-image-creator",
    // 2 color combo source: https://2colors.colorion.co/
    theme: {
      // default: #000000
      backgroundColor: "#D4B996",
      // default: #64b469
      foregroundColor: "#A07855",
    },
    // these are default options.
    loadPageNumber: {
      pagesEnd: true,
      sectionsEnd: true,
    },
  },
  // webp are too lightweight, recommended. (required argument).
  "image/webp",
  // buffer is only available in node.js, for web use base64 or blob.
  // (required argument).
  "buffer",
).then(({ data: image }) => {
  fs.writeFileSync("./image.webp", image);
});

معرض الصور

الوصف	الصورة
تحديدات متفرقة (أذكار النوم) — 1422 هـ
تفسير ابن أبي زمنين — 1422 هـ
تخصيص 1
تخصيص 2
تخصيص 3
تخصيص عرض للصورة
المدينة 1405 هـ
المدينة 1422 هـ
المدينة 1439 هـ
المصحف المجود
شُعبة
ورش
قالون
الدوري
السوسي

---

المساهمة

1. افتح issue
2. انسخ المستودع (fork)
3. أنشئ فرعًا (git checkout -b feature/my-feature)
4. قدّم طلب سحب (pull request)

---

الترخيص

Waqf General Public License v2.0