Files
SnapOtter/apps/docs/ar/tools/image/lqip-placeholder.md
T
SnapOtterandGitHub 4963ab3bbd feat(docs-i18n): translate all documentation into 20 languages
All 181 docs markdown files translated into 20 languages (apps/docs/<locale>/**). Companion to the i18n code PR; admin-merged because the file count exceeds GitHub's per-PR CI trigger limit. Validated by pnpm i18n:check (all surfaces, 0 stale/missing) and a clean all-locale docs build.
2026-07-11 13:52:47 +08:00

3.1 KiB

description, i18n_source_hash, i18n_provenance, i18n_output_hash
description i18n_source_hash i18n_provenance i18n_output_hash
إنشاء عنصر نائب صغير منخفض الجودة للصورة مع data URI بترميز base64. f8a27c8021f5 human 12c0e11492ab

العنصر النائب LQIP

أنشئ عنصراً نائباً صغيراً منخفض الجودة للصورة (LQIP) من صورة مصدر. يُرجع ملف عنصر نائب صغير إلى جانب data URI بترميز base64، ووسم HTML <img> جاهز للاستخدام، ومقتطف CSS background-image للتضمين الفوري.

نقطة نهاية API

POST /api/v1/tools/image/lqip-placeholder

يقبل بيانات نموذج multipart تحتوي على ملف صورة وحقل JSON settings.

المعاملات

المعامل النوع مطلوب الافتراضي الوصف
width integer لا 16 العرض المستهدف بالبكسل (4-64)
blur number لا 2 نصف قطر التمويه لاستراتيجية التمويه (0-20)
strategy string لا "blur" استراتيجية العنصر النائب: blur، pixelate، أو solid
format string لا "webp" صيغة المخرجات: webp، png، أو jpeg
quality integer لا 50 جودة المخرجات (1-100)

مثال على طلب

curl -X POST http://localhost:1349/api/v1/tools/image/lqip-placeholder \
  -H "Authorization: Bearer si_your-api-key" \
  -F "file=@photo.jpg" \
  -F 'settings={"width": 20, "strategy": "blur", "format": "webp"}'

مثال على استجابة

{
  "jobId": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "downloadUrl": "/api/v1/download/a1b2c3d4-e5f6-7890-abcd-ef1234567890/photo.webp",
  "originalSize": 2450000,
  "processedSize": 280,
  "dataUri": "data:image/webp;base64,UklGR...",
  "width": 20,
  "height": 13,
  "bytes": 280,
  "strategy": "blur",
  "html": "<img src=\"data:image/webp;base64,UklGR...\" />",
  "css": "background-image:url('data:image/webp;base64,UklGR...');background-size:cover;background-position:center;"
}

ملاحظات

  • يحتوي حقل dataUri على data URI الكامل، جاهز للاستخدام في سمات src أو CSS دون أي طلبات إضافية.
  • يوفّر حقلا html وcss مقتطفات نسخ ولصق لحالات الاستخدام الشائعة.
  • تُنتج استراتيجية blur صورة مصغرة ناعمة مموّهة. وتنشئ استراتيجية pixelate فسيفساء مربّعة. وتُرجع استراتيجية solid لوناً واحداً بمتوسط.
  • تتراوح أحجام العنصر النائب النموذجية بين 200-500 بايت، ما يجعلها مناسبة للتضمين المباشر في HTML.
  • يُحسَب الارتفاع تلقائياً للحفاظ على نسبة العرض إلى الارتفاع لصورة المصدر.
  • تُفك ترميز إدخالات HEIC وRAW وPSD وSVG تلقائياً قبل المعالجة.