Անվճար և բաց կոդով գործիք, որն օգնում է վեբկայքերը բացել

Սա մի գրառում է, որը ես երկար ժամանակ հետաձգում էի, բայց կարծում եմ, որ ժամանակն է դա կիսել համայնքի հետ: Երկու տարի առաջ ես նստեցի՝ սկսելու նոր նախագիծ՝ փորձ, որը ներառում էր պատկերի մասշտաբի իջեցում և Node.js, և այդ ժամանակվանից այն դարձավ իմ հիմնական բաց կոդով նախագիծը:

Ես ուզում էի ստեղծել պատասխանող պատկերներ իմ կայքի համարավելի լավ փորձ առաջարկելու համար: Այն կյանքի է կոչվել որպես Node.js սկրիպտների մի շարք և մի քանի կրկնությունների ընթացքում վերածվել է բաց կոդով փաթեթի, որը թողարկվել է npm-ում Responsive Image Builder անունով:

Այն ստեղծվել է անհրաժեշտությունից՝ գոյություն ունեցող բաց կոդով լուծումների բացակայության պատճառով:

Թույլ տվեք պարզ ասել, որ կան մի շարք պատկերային գործիքներ, բեռնիչներ և երրորդ կողմի ծառայություններ: Սակայն նրանցից ոչ մեկը, իմ կարծիքով, չի կատարել իմ կարիքները։ Ավելին, ես սիրահարված էի gatsby-image-ին և Մայքլ Ֆոգլեմանի պրիմիտիվ գրադարանին (որը դժվար էր ինտեգրվել գոյություն ունեցող լուծումներին):

Սա ստիպեց ինձ ստեղծել իմ սեփական լուծումը՝ իմ բավականին յուրահատուկ պահանջները լուծելու համար.

  • 🔥 Արագ (ակնհայտ է…)
  • 💎 Պատկերի լավագույն ալգորիթմները (Lanczos3 😎)
  • 🌁 Աջակցեք գեղեցիկ SVG տեղապահներին, ինչպիսիք են պարզունակ գրադարանը
  • 🙏 Պարզ
  • ՕՀ-ագնոստիկ, անվճար, զուգահեռականացում, ցանցի հետադարձ շրջագայություն, առանց ընդլայնման, …

Իմ նպատակն էր սոսնձել գոյություն ունեցող պատկերների գրադարանները միասնական գործիքակազմի մեջ, որը կարող է հարմարեցվել՝ թույլ տալու համար պատկերների մշակումը տարբեր ձևերով:

Psst! Նախագծի մոտիվացիայի մասին ավելին կարող եք կարդալ այստեղ:

Այսօր այն կրում է այլ անվանում, որն ավելի լավ է արտացոլում նրա նոր ֆունկցիոնալությունը (և մասամբ պայմանավորված փաթեթի վերապահված շրջանակով ️🤦‍♂️). Image Processing Pipeline: Մշակման «աշխատանքային հոսքը» այժմ լիովին հարմարեցված է, և այն նաև նոր թողարկվել է, որը վերափոխել է ներքին մասերը, ինչը հեշտացնում է ադապտերների ներդրումը, ինչպիսին է նոր վեբ փաթեթի բեռնիչը:

Նոր IPP-ն ունի դեկլարատիվ խողովակաշարի ձևաչափ: Ասացեք, *ինչպես* այն պետք է ստեղծի ձեր պատկերները:

Ի զարմանս ինձ, GitHub-ի բաց կոդով պահոցը կամաց-կամաց աստղեր է ձեռք բերում, խնդիր և նույնիսկ ցուցադրվում է Medium-ի հոդվածում, չնայած որ երբեք չի կիսվել կամ չի հիշատակել նախագիծը առցանց: Ես ուզում էի սպասել IPP-ի իսկապես կայուն թողարկմանը՝ նախքան այն պաշտոնապես հայտարարելը, բայց թվում է, որ առցանց համայնքը անհանգիստ է և ցանկանում է նոր բաներ փորձել:

Միգուցե սա ճիշտ ժամանակն է։ Ամառը մոտենում է ավարտին, և իմ համալսարանական ուսումը վերսկսվել է։ Այնուամենայնիվ, ես դեռլիովին հավատարիմ եմ ծրագրի պահպանմանը տեսանելի ապագայում: Այնուամենայնիվ, դա հսկայական ձեռնարկ է մեկ մասնակցի համար, ուստի գիշերային թողարկումներ մի սպասեք:

Միգուցե փորձեք օգտագործել այն ավելի փոքր նախագծում և տեսնել, թե արդյոք այն համապատասխանում է ձեր կարիքներին: Եթե ​​ցանկանում եք նպաստել, PR-ները ողջունելի են: Հիշեք, որ նպատակը միջուկը հնարավորինս պարզ պահելն է, որպեսզի նպաստի պահպանմանը, այլ ոչ թե լողացող գործառույթին:

IPP-ն չի սահմանափակվում միայն վեբկայքի մշակմամբ, այլ կարող է օգտակար լինել նաև պատկերների խմբաքանակի մշակման կամ հետնամասային պատկերների աշխատանքների համար, քանի որ այն օգտագործելու համար որևէ կոդ չի պահանջվում:

Ես քրտնաջան աշխատել եմ ստեղծելով փաստաթղթերի նոր կայք, որը հասանելի է բոլոր տեխնիկական ծագման օգտատերերի համար: Նկատի ունեցեք, որ այն դեռ ակտիվ աշխատանք է ընթանում։ Մինչև այն ավարտվի, կա նաև աղբյուրային ծածկագրի հետ ծանոթանալու տարբերակը, որի նպատակն է լինել պարզ և ընթեռնելի:



Պատկերի մշակման խողովակաշար
Ստուգեք IPP-ի փաստաթղթերն այստեղ:ipp.vercel.app



Եկեք սուզվենք

Հետևյալ բաժինը հրամանի տողի ինտերֆեյսի արագ մեկնարկի ուղեցույց է: Ավելի ամբողջական օրինակը հասանելի է վերը նշված կայքում:

Նախադրյալներ

IPP-ն աշխատում է Node.js-ում և բաշխվում է npm-ի միջոցով: Դրանք միացված են միասին և կարելի է ձեռք բերել պաշտոնական կայքից:

Տեղադրման հետ կապված խնդիրներից խուսափելու համար խորհուրդ է տրվում ստանալ LTS թողարկում կամ Node.js-ի ավելի քիչ վերջին տարբերակը: Իմանալ ավելին

Տեղադրում

Բացեք տերմինալ ինչ-որ տեղ և կատարեք հետևյալը (առանց դոլարի նշանի), որը CLI-ն ամբողջապես կտեղադրի ձեր համակարգում (տեղադրման այլ տարբերակներ կան).

$ npm install --global @ipp/cli

Եվ վերջ: ✨

Կրկին, եթե դուք ստանում եք հանգույցի հետ կապված տեղադրման սխալ, փորձեք Node.js-ի ավելի հին թողարկումը, որպեսզի խուսափեք Python և C++ կոմպիլյատոր տեղադրելուց: Սա դիզայնի սահմանափակում է, կազմված լեզուները դժվար են, և IPP-ն ցանկանում է արագ լինել:

Օգտագործումը

Ձեռք բերեք մի քանի պատկերներ և դրեք դրանք ձեր ընտրած անունով նոր թղթապանակում:

Այդ թղթապանակի կողքին ստեղծեք կազմաձևման ֆայլ, որը կոչվում է .ipprc.yml: Պատճենեք և տեղադրեք հետևյալը այդ ֆայլի մեջ (փոխարինելով «պատկերները» նախկինում ստեղծված թղթապանակի անունով).

input: images
output: formats
manifest:
  source:
    x: hash:12
  format:
    w: width
    p: path
pipeline:
  - pipe: resize
    options:
      resizeOptions:
        width: 1280
    save: "[source.name]-[hash:8][ext]"

Այնուհետև բացեք տերմինալի հուշում, նավարկեք կազմաձևման ֆայլը պարունակող թղթապանակ և գործարկեք IPP:

$ ipp

Եթե ​​ամեն ինչ ճիշտ է կարգավորվել, IPP-ն կցուցադրի որոշ օգտակար գործառնական տեղեկություններ և կհայտնի հաջող գործողության մասին: Այժմ պետք է լինի երկրորդ թղթապանակ, որը կոչվում է ձևաչափեր՝ մի խումբ նոր պատկերներով:

Այսպիսով, ինչ արեց դա:

Վերոնշյալ կազմաձևման ֆայլը վերցնում է յուրաքանչյուր աղբյուրի պատկեր և փոխում է դրա չափը, որպեսզի ունենա առավելագույն լայնություն 1280 պիքսել: Այս շեմից փոքր պատկերները չեն փոխվի, այլ կփոխանցվեն: Ահա, որտեղ IPP-ն սկսում է փայլել: Այնուհետև պատկերը պահվում է՝ օգտագործելով IPP-ի շաբլոն բառացի տարբերակը՝ ֆայլի անունը ստեղծելու համար:

Բացի այդ, նկատեք manifest.json ֆայլը formatsգրացուցակում: Սա պարունակում է բոլոր ելքային արդյունքների JSON ամփոփագիր: Օրինակ, դուք կարող եք գտնել գրառում, որը նման է հետևյալին.

{
  "f": [
    {
      "w": 1280,
      "p": "red-green-macaw-74cd8540.jpg"
    }
  ],
  "s": { "x": "7f5d4e26980c" }
}

Մանիֆեստի ֆայլը ստեղծվում է կազմաձևման ֆայլում manifest ստեղնի հիման վրա: Ընթացիկ մանիֆեստի կոնֆիգուրացիան դուրս է բերում աղբյուրպատկերի հեշը, որը սահմանափակվում է 12 նիշով, և յուրաքանչյուր ելքային ֆորմատի պատկերի լայնությունն ու ճանապարհը:

Հուշում. աղբյուրի հեշը ստեղծվում է ֆայլի բովանդակությունից և երբեք չի փոխվի, այն կարող է օգտակար լինել որպես պատկերի որոնման մեխանիզմ

IPP-ն չափափոխման գործիք չէ, այլ համատեքստային տեղյակ: Այն նաև նպատակ ունի տեղեկացնել սպառողին (օրինակ՝ զննարկիչին)՝ տրամադրելով առկա պատկերների ցանկը և թույլ տալով նրանց ընտրել լավագույնը հարմար պատկերը՝ հիմնվելով պատկերի չափսերի, կոդեկի և այլնի վրա…

Մանիֆեստի ֆայլը կարող է հետագայում մշակվել կամ այն ​​կարող է ներբեռնվել և պահվել հաճախորդի կողմից: Կան նույնիսկ ավելի լավ տարբերակներ, ինչպիսիք են պաշտոնական վեբ փաթեթի բեռնիչը, որը փոխակերպում է պատկերների ներմուծումը մեկ մանիֆեստի մուտքի, ինչպես վերը նշված օրինակում:

Ինչպես է դա աշխատում?

Մեկ պատկերի փոխակերպումը ներկայացված է խողովակ հասկացությամբ: Իրականում, դա ասինխրոն մաքուր ֆունկցիա է (դուք նույնիսկ կարող եք կատարել ձերը):

Պատկերը ներկայացված է երկուական բուֆեր և մետատվյալների օբյեկտ: Դրանք փոխկապակցված տվյալների կտորներ են և, հետևաբար, մնում են միասին (ներքին անվանում են Տվյալների օբյեկտ): Մետատվյալները տրամադրում են համատեքստային տեղեկատվություն բուֆերի մասին և դանդաղորեն «կառուցվում» են յուրաքանչյուր խողովակի կողմից:

Խողովակները կարող են փոխկապակցվել՝ օգտագործելով then հատկությունը՝ խողովակաշարի ճյուղ (ծառի նմանվող) ստեղծելու համար: Խողովակաշարի ճյուղերի զանգվածը ստեղծում է խողովակաշար:

- pipe: resize
  then:
    - pipe: compress
      save: "[source.name][ext]"
    - pipe: convert
      ...

Յուրաքանչյուր խողովակ կարող է լրացուցիչ նշել save հատկություն, որն արտահանում է իր արտադրանքը խողովակաշարից: Արտահանված պատկերը կոչվում է ֆորմատ և հանդիսանում է խողովակաշարի այդ կետում գտնվող Տվյալների օբյեկտի պատկերը (այստեղ կարևոր է անփոփոխությունը):

Սա @ipp/core փաթեթի հիմնական ճարտարապետությունն է: Իրականացումները (օրինակ՝ հրամանի տողի ինտերֆեյսը) կարող են որոշել, թե ինչպես վարվել ավելի նուրբ մանրամասների վրա, օրինակ՝ ինչպես վարվել պահպանման բանալին և պահպանել մետատվյալները:

Պատրա՞ստ եք ավելիին:

Շնորհակալություն մինչև վերջ մնալու համար: Շատ ավելին կա, քան դուք կարող եք կարդալ պաշտոնական փաստաթղթերում:

Կան ավելի շատ պլանավորված գործառույթներ, ինչպիսիք են ասինխրոն կրկնվող աջակցությունը հիշողության արդյունավետությունը բարելավելու համար, կամընտիր սկավառակի վրա հիմնված քեշավորում, ավելի շատ ադապտերներ, ճակատային ինտեգրումներ,…

Սա իմ առաջին հոդվածն է բաց կոդով նախագծի վերաբերյալ, և ես ուրախ եմ լսել ձեր մեկնաբանությունները և արձագանքները: 😁 Ի՞նչ աշխատանքային հոսքեր եք օգտագործում ձեր պատկերների համար:

P.S. Ես բացարձակապես կվրդովվեմ, եթե ինչ-որ մեկը պատասխանի «հեյ, սա արդեն կա, ստուգիր…»: Համենայն դեպս, դա հիանալի ուսուցման փորձ էր, այնպես չէ՞…: