با Pixo آشنا شوید، یک ویرایشگر عکس برای کاربران نهایی شما – مجله Smashing

امروزه خدمات زیادی وجود دارد که با عکس کار می کنند. تصاویر روتوش شده معمولاً اهداف خود را بسیار بهتر از تصاویر خام انجام می دهند. اگر سرویسی را توسعه می دهید که به کاربرانش امکان می دهد عکس ها را آپلود کنند، قرار دادن یک ابزار ویرایش عکس درست در سرویس قبل از آپلود می تواند زمان زیادی را برای کاربران نهایی شما صرفه جویی کند. حتی اگر تعداد زیادی نرم افزار ویرایش عکس برای دسکتاپ و موبایل و آنلاین وجود دارد، ویرایش یک عکس یا دسته ای از عکس ها در چنین نرم افزاری می تواند کندتر از ویرایش عکس در رابط کاربری سرویس شما باشد.

بیایید تصور کنیم کاربری یک عکس را انتخاب می کند، تغییراتی را روی آن اعمال می کند و به سادگی آن را آپلود می کند. آنها نیازی به استفاده از نرم افزار پیچیده دسکتاپ یا موبایل ندارند. آنها با آپلود کردن عکس اصلی در یک ابزار ویرایش آنلاین تصویر، سپس مجبور به ذخیره تصویر ویرایش شده به صورت محلی و در نهایت آپلود آن در سرویس شما، نیازی به تلف کردن زمان ندارند.

یک نمونه کامل از چنین موارد استفاده، یک بازار آنلاین برای خودروهای دست دوم است. فروش یک ماشین بدون ارائه تعدادی عکس از آن واقعاً سخت است، درست است؟ ممکن است بخواهید تعدادی از عکس‌ها را قبل از آپلود لمس کنید، مثلاً با پوشاندن صفحه ماشین یا تنظیم تن‌ها و رنگ‌ها. مثال دیگر پلتفرم مدیریت املاک است. باز هم، عکس ها برای فروش یا اجاره یک ملک حیاتی هستند، و روتوش ممکن است مفید باشد، همچنین اضافه کردن متن روی عکس ها برای توضیح و شفاف سازی. پلتفرم‌های عکس استوک همچنین ممکن است از اینکه به کاربران نهایی خود اجازه می‌دهند عکس‌های استوک خریداری‌شده‌شان را قبل از دانلود سفارشی کنند، سود ببرند.

راه حل های زیادی برای این مشکل وجود دارد. هنگام انتخاب بهترین برای وب سایت یا برنامه خود، بهتر است موارد زیر را در نظر بگیرید:

• ادغام آسان در محصول شما
  برای ادغام چنین ابزاری نمی خواهید اسناد زیادی را بخوانید.
• هر تعداد ویژگی های مختلف که دوست دارید
• سادگی
  اکثر کاربران نهایی برای ویرایش عکس های خود به ابزارهایی با کاربرد آسان نیاز دارند.
• Rich API
  هرچه کنترل بیشتری روی ویرایشگر عکس داشته باشید، بهتر است.
• پشتیبانی از برچسب سفید
  شما می خواهید آن را مانند بخشی از برند خود جلوه دهید.
• تصاویر خروجی بهینه شده
  عملکرد وب حیاتی است.
• قیمت مقرون به صرفه

یکی از ویرایشگرهای تصویری که ممکن است دوست داشته باشید در نظر بگیرید و امتحان کنید پیکسو. و برای قرار گرفتن در معرض کامل، این همان چیزی است که ما در حال حاضر روی آن کار می کنیم، با یک طرح رایگان دوستانه نیز موجود است. Pixo را می توان به دلیل ادغام آسان (فقط چند خط جاوا اسکریپت) و API غنی در هر وب سایت یا برنامه ای ادغام کرد. همچنین به عنوان یک افزونه برای وردپرس در دسترس است و جایگزین ویرایشگر تصویر پیش فرض در WP Admin می شود. Pixo Editor تمام ویژگی‌های ویرایشگر پیش‌فرض و چند ویژگی دیگر را دارد.

یکی از آنها است ویرایش دسته ای که به مدیر/ویرایشگر سایت اجازه می دهد تا تغییراتی را در یک عکس ایجاد کند و آنها را در کل دسته تکرار کند. به سادگی دسته ای از عکس ها را در کتابخانه رسانه انتخاب کنید و ویرایش دسته ای را انتخاب کنید. وقتی Pixo اولین عکس را برای ویرایش باز می‌کند، ویرایشگر سایت تغییراتی ایجاد می‌کند – فیلتری را انتخاب می‌کند، رنگ‌ها را تنظیم می‌کند و متن اضافه می‌کند. در ذخیره، تغییرات به بقیه عکس‌های دسته‌ای تکرار می‌شود!

اما نکته جالب‌تر این واقعیت است که Pixo می‌تواند در صفحه اصلی سایت وردپرس ادغام شود – مهم نیست که کدام موضوع انتخاب شده یا کدام افزونه وجود دارد. Pixo به یک فیلد ورودی فایل متصل می شود و برای انتخاب تصویر گوش می دهد. وقتی کاربر نهایی عکسی را انتخاب می کند، Pixo Editor آن را برای ویرایش باز می کند. سپس کاربر می تواند تغییراتی را ایجاد کند و آنها را در ورودی فایل ذخیره کند. ارسال ورودی فایل در واقع عکس ویرایش شده را ارسال می کند، نه عکس اصلی. این اساساً باعث می شود که ویرایشگر به راحتی در هر جایی یکپارچه شود.

می توانید آن را از طریق انتخابگر CSS به هر فیلد ورودی فایل در صفحه یا یک قسمت خاص متصل کنید. کنترل کننده ارسال فرم می تواند یک افزونه فروشگاه آنلاین یا یک افزونه فرم تماس باشد. تا زمانی که یک فیلد ورودی فایل را در صفحه چاپ می کند و آپلود فایل را هنگام ارسال فرم مدیریت می کند، واقعاً مهم نیست.

از آنجایی که Pixo یک SaaS است، می توان آن را در هر جایی با چند خط جاوا اسکریپت ادغام کرد. می تواند یک تصویر را از DOM یا از یک URL بارگیری کند، base64 رشته یا dataurl، از سیستم فایل محلی و موارد دیگر.

var image = document.getElementById('myimage'); // DOM image
var image="https://yourdomain.com/path/to/image.jpg"); // image url
var image="abfdSDFEWwq2332Wdsdsdf435esf345SDfdr4S="; // base64 encoded image
var image="data:image/png;base64,abfdSDFEWwq2332Wdsdsdf43.."; // dataurl
var image="{...}"; // previously exported image as JSON

var constructor_options = { apikey: 'abc123xyz000' }; // must be a valid API key issued by https://pixoeditor.com
new Pixo.Bridge(constructor_options).edit(image);

هنگامی که تصویر ویرایش شده صادر می شود، می توانید تصمیم بگیرید که با آن در یک تابع پاسخ به تماس چه کاری انجام دهید.

new Pixo.Bridge({
    apikey: 'abc123xyz000',
    onSave: function(image){
       // download the photo
       image.download();
       // or inject it into the DOM
       document.body.appendChild(image.toImage());
       // or serialize it as JSON
       image.toJSON();
       // or upload the photo
       var data = new FormData();
       data.append('image', image.toBlob());
       var request = new XMLHttpRequest();
       request.open('POST', 'http://yourdomain.com/path/to/upload.php');
       request.send(data);
    }
 }).edit('http://yourdomain.com/path/to/imagetoedit.jpg');

در اینجا یک مثال CodeSandbox وجود دارد که برخی از گزینه های ورودی و خروجی موجود را نشان می دهد:

ویژگی های ویرایش عکس

Pixo Editor رایج‌ترین ابزارهای ویرایش تصویر – برش و چرخش، تصحیح رنگ، افزودن متن غنی روی تصویر، فیلترها و برچسب‌ها را اجرا می‌کند. یک کتابخانه استیکرهای سهام وجود دارد، اما کاربر نهایی می‌تواند تصویر دیگری را آپلود کرده و آن را به عنوان یک برچسب درج کند.

یکی از بهترین ویژگی ها ابزار Background است. این به کاربران نهایی امکان می دهد پس زمینه را با یک رنگ ثابت، تصویر دیگری از Unsplash یا یک تصویر سفارشی جایگزین کنند.

ابزارهای ترسیمی وجود دارد که به کاربران نهایی اجازه می دهد آزادانه بالای تصویر بکشند. ابزار Pencil برای چرخاندن برخی از قسمت‌های تصویر یا کشیدن فلش‌ها برای اشاره به چیزی مفید است. ابزار Blur برای پوشاندن بخش‌هایی از عکس – صفحات ماشین، چهره‌ها یا سایر اطلاعات حساس بسیار عالی است. ابزار Erase کاری را که می گوید انجام می دهد – قسمت هایی از برچسب های درج شده و سایر تصاویر را پاک می کند. متأسفانه ابزار Erase روی عکس منبع کار نمی کند.

یکی دیگر از ویژگی های جالب ترمیم جلسه است. هنگامی که کاربر عکسی را در Pixo ویرایش می‌کند، آن را دانلود می‌کند و سپس آن را برای ویرایش باز می‌کند، همه اشیا مانند متن و برچسب‌ها قابل ویرایش هستند و تاریخچه لغو/دوباره نیز وجود دارد. این واقعاً جالب است زیرا اگر کاربر اشتباهی مرتکب شود، می تواند به راحتی آن را برطرف کند. بازیابی جلسه همچنین در صورتی کار می کند که کاربر مرورگر وب را به طور تصادفی ببندد. باز کردن ویرایشگر با همان عکس باعث می شود کاربر جلسه قبلی را بازیابی کند و کار او از بین نمی رود.

آخرین اما نه کم‌اهمیت، عکس‌های خروجی فشرده‌سازی فوق‌العاده‌ای را بدون افت کیفیت دریافت می‌کنند، بنابراین لازم نیست نگران ترافیک و ذخیره‌سازی باشید. این ویرایشگر از فرمت WebP نیز پشتیبانی می کند.

پشتیبانی از برچسب سفید

Pixo Editor دارای پشتیبانی کامل از برچسب سفید است. می‌توانید ظاهر و احساس ویرایشگر را کاملاً تغییر دهید تا با نام تجاری خود – آرم، رنگ‌ها، فونت‌ها و حتی طرح‌بندی مطابقت داشته باشد. API این امکان را می دهد که پالت رنگ خود را با چند ویژگی جاوا اسکریپت تعریف کنید. اما شما حتی می توانید یک فایل CSS سفارشی را با بازنویسی آپلود کنید و اساساً هر چیزی را تغییر دهید. این ویرایشگر دارای شش تم پیش‌فرض است که می‌توانید تم خود را در بالای آن بسازید.

قالب ها

ایجاد قالب یکی دیگر از ویژگی های جالب این سرویس است. با ویرایشگر Pixo، می توانید تغییراتی را روی یک تصویر اعمال کنید و آن را به عنوان یک الگو صادر کنید. سپس، هنگامی که کاربر نهایی این الگو را انتخاب می کند، کد برنامه شما می تواند آن را در Pixo Editor بارگیری کند و تصویر منبع را با تصویر انتخاب شده توسط کاربر جایگزین کند. به این ترتیب، تمام ویرایش‌ها، مانند بلوک‌های متن، فیلترها و تصحیح رنگ‌ها، به یکباره روی تصویر کاربر اعمال می‌شوند. این برای تصاویر پوستر بسیار مفید است.

شما می توانید الگوهایی را با متغیرهای متنی ایجاد کنید. هنگامی که کاربران نهایی این الگوها را ویرایش می‌کنند، می‌توانند متن سفارشی خود را به جای‌بان‌ها اضافه کنند و نتیجه نهایی را به عنوان تصویر صادر کنند.

در اینجا نمونه هایی از JSFiddle آورده شده است:

1. سازنده قالب
   نمونه ای از Pixo که برای ایجاد یک الگو و ذخیره آن در localStorage برای سادگی استفاده می شود.
2. مصرف کننده الگو
   نمونه ای از Pixo که برای انتخاب یک تصویر و اعمال الگو روی آن استفاده می شود.

API

Pixo یک API ارائه می‌کند که به توسعه‌دهندگان اجازه می‌دهد ویرایشگر را پیکربندی کنند، و همچنین دستورات را اجرا کرده و تغییرات را در عکس بارگذاری‌شده فعلی اعمال کنند. به عنوان مثال، می توانید کتابخانه استیکرهای سهام را با استیکرهای سفارشی خود به راحتی گسترش دهید:

pixo_instance.filterStickers(function (stock_stickers) {
   // merge or completely replace the stickers
   return my_stickers;
});

اگر می‌خواهید قاب‌های عکس استوک، فونت‌ها (برای ابزار متن) و اندازه‌های برش از پیش تعریف‌شده را اصلاح کنید، می‌توانید از رویکرد مشابهی استفاده کنید. و اگر می خواهید تغییری را به صورت برنامه ریزی شده در عکس فعلی اعمال کنید، می توانید آن را با exec فرمان شما می توانید تقریباً هر کاری را که کاربر نهایی می تواند در ویرایشگر انجام دهد – به سادگی با اجرای دستور مربوطه انجام دهید. این شامل اعمال فیلتر، درج برچسب، حذف پس‌زمینه، تصحیح رنگ، برش، تبدیل و غیره است. در ترکیب با برخی از CSS های سفارشی، می توانید به سرعت کنترل های خود را پیاده سازی کنید و فقط از بوم و منطق تجاری Pixo استفاده کنید:

در مثال بالا، کنترل های داخلی را با CSS مخفی می کنیم (display: none)، و ما فقط بوم را قابل مشاهده می گذاریم. و با مقداری HTML، CSS و جاوا اسکریپت که فراخوانی می کند exec API، ما اساساً کنترل های سفارشی خود را پیاده سازی می کنیم. اگر بنا به دلایلی نتوانیم رابط کاربری را به شکلی که می‌خواهیم فقط با CSS شخصی‌سازی کنیم، می‌تواند مفید باشد.

اما موارد استفاده بسیار بیشتری برای API وجود دارد. برای مثال، می‌توانیم با برش دادن تصویر در بارگذاری با استفاده از API، اطمینان حاصل کنیم که تصاویر ویرایش‌شده با نسبت ابعاد خاصی مطابقت دارند. یا زمانی که ویرایش توسط کاربر نهایی انجام می‌شود، می‌توانیم یک واترمارک در هنگام صادرات وارد کنیم:

REST API

Pixo همچنین یک نقطه پایانی REST ارائه می دهد. می توانید آن را ارسال یک فایل باینری تصویر یا با URL به یک تصویر یا نمایش base64 آن نامید و همان تغییراتی را که کاربر نهایی می تواند در ویرایشگر انجام دهد اعمال کنید:

curl -X POST -F 'apikey=yourapikey' -F 'filter=Sepia' -F 'image=@input.jpeg' https://pixoeditor.com/api/image > output.jpeg

ادغام Pixo در برنامه های موبایل بومی

Pixo یک سرویس مبتنی بر جاوا اسکریپت است که برای وب‌سایت‌ها یا برنامه‌های کاربردی وب طراحی شده است، اما به لطف مؤلفه WebView که توسط iOS و Android پشتیبانی می‌شود، می‌توان آن را در برنامه‌های تلفن همراه بومی نیز ادغام کرد. جریان بسیار ساده است:

1. کاربر یک عکس را برای ویرایش با استفاده از یک جزء اصلی Image Picker برمی‌دارد.
2. عکس به رشته base64 کدگذاری شده است.
3. Pixo در داخل یک مؤلفه WebView بارگذاری می شود.
4. رشته base64 با استفاده از API پیام رسانی WebView به Pixo ارسال می شود.
5. کاربر عکس را با ویرایشگر ویرایش می کند.
6. کاربر از عکس ویرایش شده راضی است و آن را صادر می کند.
7. Pixo یک تابع بومی را از طریق WebView API فراخوانی می کند و عکس ویرایش شده را به عنوان یک رشته base64 ارسال می کند.
8. رشته base64 به یک تصویر بومی تبدیل می شود.

می توانید اینجا ببینید یک برنامه آزمایشی برای iOS که رویکرد فوق را اجرا می کند و یک برنامه برای iOS و Android که در Flutter پیاده سازی شده است.

همین رویکرد را می توان در یک برنامه دسکتاپ Electron پیاده سازی کرد.

مزایا و معایب

استفاده از سرویس ویرایش تصویر شخص ثالث به دلیل ادغام بسیار آسان آن عالی است. افزودن یک SDK ویرایش تصویر یا حتی پیاده سازی چنین ویرایشگری به تنهایی نیاز به تلاش بسیار بیشتری دارد. همچنین، سرویس «به‌روزرسانی خودکار»، یعنی جدیدترین، بهترین و جالب‌ترین ویژگی‌های جدید، رفع اشکال‌ها و بهبودها را دریافت خواهید کرد و مرورگرهای جدید به‌طور خودکار پشتیبانی می‌کنند – بدون اینکه نیازی به تغییر چیزی از طرف خود داشته باشید. با این حال، اگر نسخه جدیدتر به درستی توسط فروشنده تست نشده باشد، این خطر معرفی باگ های جدید را افزایش می دهد.

اما از آنجایی که این یک سرویس آنلاین است، این خطر وجود دارد که برای مدتی از کار بیفتد و در این مدت، کاربران نهایی شما نتوانند کار خود را انجام دهند. تا زمانی که برنامه یا وب‌سایت اصلی شما فعال باشد، راه‌حل خود میزبان همیشه فعال خواهد بود. با این حال، میانگین آپ تایم Pixo 99.993٪ است (طبق گزارش وضعیت عمومی) که آنقدرها هم بد نیست.

افکار نهایی

به نظر می رسد Pixo راه حل خوبی برای ویرایش تصویر برای همه وب سایت ها و برنامه های وب است که نیاز به ارائه ویرایش تصویر به عنوان یک ویژگی دارند. مستندات و نمونه های دقیق آن ادغام را بسیار آسان می کند. Pixo دارد یک دوره آزمایشی رایگان 30 روزه با امکانات کامل. پس از آن، می توانید به استفاده از ابزارهای ویرایش اولیه و API های آن به صورت رایگان ادامه دهید یا یک طرح اشتراک با ویژگی های کامل دریافت کنید.

منابع

(vf, il)