עיבוד תמונות מצילומי מסך – חצים, הדגשות, זום, GIF.
כאשר יש צורך לעבד תמונות מצילומי מסך – הוספת חצים, הדגשות, זום, או יצירת GIF – הסקיל הזה מופעל.
/extract-framesשימוש ב-ffmpeg להוספת סימונים:
FFMPEG="..."
# הוספת טקסט
"$FFMPEG" -i input.jpg -vf "drawtext=text='לחצו כאן':fontsize=28:fontcolor=red:x=100:y=200" output.jpg
# הוספת מלבן הדגשה
"$FFMPEG" -i input.jpg -vf "drawbox=x=100:y=150:w=300:h=80:[email protected]:t=3" output.jpg
# חיתוך אזור ספציפי (crop) והגדלה
"$FFMPEG" -i input.jpg -vf "crop=400:300:100:200,scale=800:600" zoomed.jpg
# יצירת GIF מרצף תמונות
"$FFMPEG" -framerate 0.5 -i frame_%03d.jpg -vf "scale=800:-1" steps.gif
# חיבור שתי תמונות זו לצד זו
"$FFMPEG" -i before.jpg -i after.jpg -filter_complex "[0][1]hstack=inputs=2" comparison.jpg
תמונות מעובדות בתיקייה:
temp-frames/processed/
├── step_01_annotated.jpg
├── step_02_zoomed.jpg
├── step_03_annotated.jpg
└── steps_animation.gif
התמונות המעובדות משתלבות במצגת דרך ה-classes הקיימים:
<!-- תמונה בודדת -->
<div class="slide-image">
<img src="data:image/jpeg;base64,..." alt="שלב 1">
<div class="image-caption">לחצו על כפתור "צור עיצוב חדש"</div>
</div>
<!-- זוג תמונות (לפני/אחרי) -->
<div class="image-pair">
<div class="slide-image"><img src="..." alt="לפני"></div>
<div class="slide-image"><img src="..." alt="אחרי"></div>
</div>
temp-frames/processed/ אחרי שילוב במצגת