This is a tutorial on how to edit uploaded pictures on the fly using URL parameters!
English follows Hebrew!
עריכת תמונות בפשוטת ובמהירות
בפוסט הזה אתן לכם טיפ ענק שיחסוך לכם זמן וגם ישפר את איכות הפוסט שלכם פלאים במידה ואתם מעלים תמונות לפוסט שלכם (מה שבכלל מאוד מומלץ כדי למשוך קוראים). ואראה איך ניתן לערוך תמונות כדי לקבל תוצאה מקצועית ומגניבה במהירות
קרדיט לתמונה: Pixabay
השירות שנשתמש בו
השירות נקרא Filestack והוא נותן לנו אופציה לערוך 500 תמונות בחודש בחינם לגמרי! ההרשמה אליו פשוטה וניתן להשלים אותה תוך התחברות לפייסבוק או גוגל, לעצלנים מבניכם.
לאחר שנרשמתם, הכנסו אל הDashboard ותראו טבלה, בה יש API Key שמרו אותו, אנחנו עוד נצטרך אותו.
איך משתמשים?
בגדול השימוש הוא נורא פשוט. לפני כתובת התמונה שלנו, נוסיף
https://process.filestackapi.com/<APIKEY>/<PARAMETERS>/<IMAGE_URL>
שינויי גודל
ניתן לשנות את הגודל באמצעות הפרמטר resize.
נראה את האופציות ששינוי הגודל מאפשר. לצורך ההדגמה כתובת התמונה שנשתמש בה תהיה:
https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/myFaKeApIKeY123/resize=h:100,w:200/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
ישור תמונה
יכולת נוספת של פרמטר resize היא ליישר את התמונה, לימין, לשמאל או אפילו לפי פרצופים!
האופציה תכתב כך:
fit:crop,resize=align:faces
סוגי היישור האפשריים הם center, right, left או faces
נראה דוגמה עבור התמונה הבאה:
קרדיט: Pixabay
https://process.filestackapi.com/myFaKeApIKeY123/resize=w:100,h:500,fit:crop,align:faces/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
מסגרות
ישנן כמה סוגי מסגרות שניתן לתת כפרמטרים.
circle- מחזירה מסגרת מעוגלתtorn_edges- שוליים קרועים, כמו תמונה מהעברshadow- מחזירה תמונה עם צל על הרקע הגורם להבלטהpolaroid- רקע המדמה תמונה שצולמה במצלמת פולארוידvignette- טשטוש הקצוות
דוגמאות:
https://process.filestackapi.com/MyFakeApiKey/polaroid/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/circle/shadow/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
פילטרים
הפילטרים האפשריים הם:
monochromesepiasharpenbluroilpaintblackwhite
דוגמאות!
https://process.filestackapi.com/MyFakeApiKey/sepia/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/oil_paint/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
צילום מסך לאתר
עצלנים? אין בעיה. ככה תעשו את זה
https://process.filestackapi.com/MyFakeApiKey/urlscreenshot/resize=h:500,w:1000,fit:crop,a:top/http://www.busy.org
תמונה לטקסט
עוד יכולת מגניבה היא המרת תמונה לטקסט!
בואו נראה.
https://process.filestackapi.com/MyFakeApiKey//ascii/https://s11.postimg.org/6fr8dafcj/steem.jpg
..
.:;,
,:;;;.
,;;;;;;.
. .:;;;;;;: .
.:11. ,;;;;;;;;: .;1i
.;1tfi :;;;;;;;;;: .ittf:
:1fttt; :;;;;;;;;;;; .;ttttt,
.ifttttt: ,;;;;;;;;;;;;. ,ttttttt.
,tttttttf; ,;;;;;;;;;;;;; :tttttttt,
.1tttttttti .;;;;;;;;;;;;;: ,ttttttttf:
,tttttttttt, :;;;;;;;;;;;;;: ;ttttttttt1.
.ttttttttttt. .;;;;;;;;;;;;;;, :tttttttttti
;fttttttttt1. :;;;;;;;;;;;;;;, 1tttttttttf;
1tttttttttt1. :;;;;;;;;;;;;;;, ,ttttttttttt;
,ttttttttttt1 .;;;;;;;;;;;;;;;, ;ttttttttttt;
:ttttttttttt1 .;;;;;;;;;;;;;;;, ittttttttttt;
;ftttttttttti ,;;;;;;;;;;;;;;;, 1ttttttttttt:
;ftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
iftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
ittttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttt: ,;;;;;;;;;;;;;;;. .ttttttttttt1.
ittttttttttt. ,;;;;;;;;;;;;;;: ,ttttttttttti
1tttttttttt1 :;;;;;;;;;;;;;;: ,ttttttttttf:
.1tttttttttt: :;;;;;;;;;;;;;;. ,ttttttttttt.
.tttttttttti :;;;;;;;;;;;;;; :tttttttttt:
:ttttttttf; :;;;;;;;;;;;;;, 1ttttttttt,
.tttttttfi .;;;;;;;;;;;;;: :fttttttt:
.ttttttt: ,;;;;;;;;;;;;: :fttttf1,
:ftttti. ;;;;;;;;;;;: ittttt;
1ttt1: :;;;;;;;;;: ,tttti.
:ft1: ;;;;;;;;;, 1fti,
.1i: .;;;;;;;:. :t;,
. :;;;;;;, ..
.;;;;;,
:;;;,
.;:,
.
מקווה שלמדתם ונהנתם מהמדריך.
English
In this post, you'll learn how to kick-ass by editing pictures by only changing their URLs, on the fly! I promise this will be fast and easy and a nice thing to pump up your posts. Let's see a before and after photos:
קרדיט לתמונה: Pixabay
The platform that we'll be using
So we'll be using Filestack to do our on-the-fly editing. They offer 500 FREE image transformations just by signing up. You can sign up using Google or Slack if you're too lazy. Once you're in, go to the Dashboard and keep your API key. We'll be using it soon enough.
How to use Filestack's service?
It's easy! You'll just have to use this type of URL:
https://process.filestackapi.com/<APIKEY>/<PARAMETERS>/<IMAGE_URL>
I'll demonstrate some practical examples when I cover some parameters so it'll be clearer.
Resizes
The most trivial transformation you'll do for a picture would be to change it's dimension. It's done via the resize parameter which takes options such as height and width.
Let's see a live example:
https://process.filestackapi.com/myFaKeApIKeY123/resize=h:100,w:200/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
the h:100,w:200 stand for the height and width.
We can also resize to a cropped version of the photo and align it as we wish. It's very useful feature!
https://process.filestackapi.com/myFaKeApIKeY123/resize=w:100,h:500,fit:crop,align:faces/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
The align option takes also left, top, right, bottom or center and can be combined like this [top, right]
Cool, eh?
Borders
There are some border parameters:
circletorn_edgesshadowpolaroidvignette
Let's see them in action:
https://process.filestackapi.com/MyFakeApiKey/polaroid/https://cdn.pixabay.com/photo/2018/01/04/14/16/woman-3060784_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/circle/shadow/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
Filters
Some are available too:
monochromesepiasharpenbluroilpaintblackwhite
And some in live action:
https://process.filestackapi.com/MyFakeApiKey/sepia/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
https://process.filestackapi.com/MyFakeApiKey/oil_paint/https://cdn.pixabay.com/photo/2018/01/04/06/44/snow-3059974_960_720.jpg
URL Screenshot
Are you lazy enough? No probs.
https://process.filestackapi.com/MyFakeApiKey/urlscreenshot/resize=h:500,w:1000,fit:crop,a:top/http://www.busy.org
Image to ASCII
Always wanted to generate some cyber?
https://process.filestackapi.com/MyFakeApiKey//ascii/https://s11.postimg.org/6fr8dafcj/steem.jpg
..
.:;,
,:;;;.
,;;;;;;.
. .:;;;;;;: .
.:11. ,;;;;;;;;: .;1i
.;1tfi :;;;;;;;;;: .ittf:
:1fttt; :;;;;;;;;;;; .;ttttt,
.ifttttt: ,;;;;;;;;;;;;. ,ttttttt.
,tttttttf; ,;;;;;;;;;;;;; :tttttttt,
.1tttttttti .;;;;;;;;;;;;;: ,ttttttttf:
,tttttttttt, :;;;;;;;;;;;;;: ;ttttttttt1.
.ttttttttttt. .;;;;;;;;;;;;;;, :tttttttttti
;fttttttttt1. :;;;;;;;;;;;;;;, 1tttttttttf;
1tttttttttt1. :;;;;;;;;;;;;;;, ,ttttttttttt;
,ttttttttttt1 .;;;;;;;;;;;;;;;, ;ttttttttttt;
:ttttttttttt1 .;;;;;;;;;;;;;;;, ittttttttttt;
;ftttttttttti ,;;;;;;;;;;;;;;;, 1ttttttttttt:
;ftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
iftttttttttti ,;;;;;;;;;;;;;;;, .1ttttttttttt:
ittttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttf; ,;;;;;;;;;;;;;;;. .tttttttttttt,
iftttttttttt: ,;;;;;;;;;;;;;;;. .ttttttttttt1.
ittttttttttt. ,;;;;;;;;;;;;;;: ,ttttttttttti
1tttttttttt1 :;;;;;;;;;;;;;;: ,ttttttttttf:
.1tttttttttt: :;;;;;;;;;;;;;;. ,ttttttttttt.
.tttttttttti :;;;;;;;;;;;;;; :tttttttttt:
:ttttttttf; :;;;;;;;;;;;;;, 1ttttttttt,
.tttttttfi .;;;;;;;;;;;;;: :fttttttt:
.ttttttt: ,;;;;;;;;;;;;: :fttttf1,
:ftttti. ;;;;;;;;;;;: ittttt;
1ttt1: :;;;;;;;;;: ,tttti.
:ft1: ;;;;;;;;;, 1fti,
.1i: .;;;;;;;:. :t;,
. :;;;;;;, ..
.;;;;;,
:;;;,
.;:,
.
I hope you liked this tutorial! Follows and resteems are much appreciated! :)