§

Rasmni tashlang yoki tanlash uchun bosing

PNG, JPEG, WebP — har bir fayl uchun 30 MB gacha.

Nashr qilishdan oldin fotosuratni kesish — bu sahifaning o'qilishini sezilarli darajada yaxshilaydigan kichik tahrirlardan biridir. AQShlik fotograf portfel sayti uchun landshaft suratini tahrirlayotganda hero banner uchun 16:9 nisbatini xohlashi mumkin. E-commerce listing uchun eskizlar tayyorlayotgan mahsulot menejeri 1:1 nisbatini qulflaydi, shunda har bir kvadrat karta panjarada tekis joylashadi. Jira ticketi uchun UI xatosini skrinshot qilayotgan dasturchi brauzer chekkalari va dokni bir necha soniyada kesib tashlaydi. Kesish mijoz tomonida sodir bo'lgani uchun u cheklangan brauzerli kompaniya noutbukida, mahalliy rasm muharriri bo'lmagan Chrome OS qurilmasida yoki noutbuk mavjud bo'lmagan iPad-da ishlaydi. Piksel ko'rsatkichi siz tortayotganda aniq kesish o'lchamlarini ko'rsatadi, shuning uchun taxmin qilmasdan to'g'ri ramkani topasiz. Yuklash yo'q, bulutli sayohat yo'q, hisob yaratish yo'q — shunchaki rasmni yuklang, kesishni ramkalang va natijani saqlang.

Brauzerda rasm kesish qanday ishlaydi

Kesish jarayoni butunlay brauzer yorlig'ingiz ichida Canvas API yordamida bajariladi. Server tomonida ishlov berish, yuklash yoki uchinchi tomon xizmatlari yo'q. Har bir qadam qurilmangizda amalga oshiriladi.

  1. Rasmni <img> elementiga yuklang, shunda brauzer uni mahalliy ravishda dekodlaydi. Canvas qoplamasi rasmni ko'rinadigan maydonga mos ravishda masshtablab ko'rsatadi, tortiladigan tanlov to'rtburchagi esa joriy kesish maydonini ko'rsatadi.
  2. Kesish maydonini sozlash uchun to'rtburchakni uning chekkalari yoki burchaklaridan torting. To'rtburchak rasm chegaralarida qoladi, shuning uchun rasm tashqarisidagi maydonni tanlay olmaysiz. Ruxsat etilgan tomonlar nisbati (1:1, 16:9, 4:3) faol bo'lganda, o'lcham o'zgartirish bu nisbatni avtomatik ravishda saqlaydi.
  3. Piksel ko'rsatkichi tortish paytida real vaqtda yangilanib, joriy kesish kengligi, balandligi, X va Y pozitsiyalarini tasvir piksel koordinatalarida ko'rsatadi. Bu sizga taxmin qilmasdan aniq o'lchamlarni nishonga olish imkonini beradi.
  4. Kesish va yuklab olish tugmasini bosganingizda, sahifa manba rasmning faqat tanlangan maydonini asl piksel o'lchamidagi offscreen Canvas-ga chizadi, so'ngra natijani canvas.toBlob() orqali manba fayl bilan bir xil formatda eksport qiladi. Yuklab olish uchun Blob URL yaratiladi.

Nega rasmlarni onlayn kesish kerak?

  • Kesish keraksiz chekkalarni, bo'sh joyni yoki vizual tartibsizlikni yo'q qiladi. Bitta kesish ko'pincha har qanday filtr yoki rang sozlashidan ko'ra fotosurat kompozitsiyasini ko'proq yaxshilaydi.
  • Nashr platformalari uchun tomonlar nisbatini nazorat qilish muhimdir. Ijtimoiy tarmoqlar profillar uchun 1:1, video eskizlar uchun 16:9 va standart fotografiya uchun 4:3 nisbatlarini kutadi. To'g'ri nisbatda kesish yuklashda noqulay letterboxing yoki kesilishlarning oldini oladi.
  • Mijoz tomonida kesish — foto muharriri bo'lmagan cheklangan korporativ qurilmalarda yagona variantdir. Hech narsa yuklanmagani uchun ma'lumot sizib chiqish xavfi va maxsus tasvirlar uchun muvofiqlik tekshiruvi talab qilinmaydi.
  • Jonli o'lcham ko'rsatkichi taxmin qilishni yo'q qiladi. Siz tortayotganda piksel koordinatalari va tanlov hajmini ko'rasiz, shuning uchun piksel o'lchash vositasiga o'tmasdan aniq kenglik va balandlikka kesishingiz mumkin.

Keng tarqalgan kesish dasturlari

Kesish veb-nashr, ijtimoiy tarmoqlar va dasturiy ta'minot ishlab chiqishda eng keng tarqalgan tasvir tahrirlaridan biridir. Brauzer asosidagi kesuvchi vaqtni tejaydigan uchta holat.

  • Onlayn do'kon uchun mahsulot fotosuratlarini tayyorlash. Har bir listing eskizi panjarada tekislanishi uchun 1:1 yoki 4:5 nisbatda kesing. Eksport asl formatni saqlaydi, shuning uchun JPEG mahsulot suratlari JPEG bo'lib qoladi.
  • Hujjatlar yoki xato hisobotlari uchun skrinshotlarni qirqish. Rasmni ticket yoki pull request-ga biriktirishdan oldin brauzer asboblar panelini, Windows vazifalar panelini yoki maxfiy bildirishnomalarni kesib tashlang.
  • Landing page uchun hero rasm yoki banner hoshiyalash. 16:9 preset-ni qulflang, fotosuratning eng muhim qismini kesish to'rtburchagi markaziga joylashtiring va retina displeylarda eng yaxshi sifat uchun asl o'lchamda eksport qiling.

Amaliy misol: 4000×3000 fotosuratni hero banner uchun 1200×675 ga kesish

Raqamli kameradan olingan 4000×3000 pikselli fotosurat odatdagi veb hero banner uchun juda katta. Banner maydoni 1200×675 (16:9 ramka) bo'lishi mumkin.

Fotosuratni yuklash zonasiga tashlang. Rasm to'liq o'lchamda yuklanadi, lekin qulay tortish interaktivligi uchun ko'rinadigan maydonga mos ravishda masshtablanadi. 16:9 tomonlar nisbati preset-ni tanlang. Kesish to'rtburchagi darhol rasmga sig'adigan eng keng 16:9 maydonga tortiladi. Fokus nuqtasini — tog' cho'qqisini, mahsulotni, odam yuzini — ramkaga joylashtirish uchun to'rtburchakni torting. Jonli ko'rsatkich joriy tanlovni 4000×2250 (to'liq tasvir 16:9 oynasi) da ko'rsatadi. Burchak tutqichini ushlang va kenglik ko'rsatkichi 1200 px ga yetguncha ichkariga torting. Balandlik avtomatik ravishda ergashadi, chunki nisbat qulflangan. Kesish va yuklab olish tugmasini bosing. Sahifa asl piksellardan tanlangan 1200×675 maydonni ajratib oladi va kesilgan faylni manba formatda taqdim etadi. Butun jarayon bir-ikki soniya davom etadi va sahifaning dastlabki yuklanishidan tashqari hech qanday tarmoq bandwidthidan foydalanmaydi.

Kesish uchun qanday tasvir formatlari qo'llab-quvvatlanadi?

Vosita brauzer dekodlashi mumkin bo'lgan har qanday formatni qabul qiladi: PNG, JPEG va WebP deyarli barcha real foydalanish holatlarini qamrab oladi. Kesilgan natija manba fayl bilan bir xil formatda saqlanadi. PNG lossless bo'lib qoladi, JPEG o'zining asl sifat darajasini saqlaydi va WebP WebP bo'lib qoladi. Format manba faylning MIME turidan aniqlanadi.

Kesish tasvir fayl hajmini kamaytiradimi?

Kesish piksellarni olib tashlaydi, shuning uchun natija fayl hajmi odatda manbadan kichikroq bo'ladi, ayniqsa katta chekka yoki bo'sh maydonni kesib tashlasangiz. Eksport asl fayl formatidan va uning kodlash parametrlaridan foydalanadi — PNG lossless bo'lib qoladi, JPEG o'zining asl sifat sozlamasini saqlaydi — shuning uchun tejash faqat kamaytirilgan piksel sonidan keladi, qayta siqishdan emas.

Tomonlar nisbati presetlari nima qiladi?

Presetlar (1:1, 16:9, 4:3, 3:2, 9:16) kesish to'rtburchagining eni va balandligi nisbatini qulflaydi. Preset faol bo'lganda, har qanday burchak yoki chekka tutqichini tortish nisbatni doimiy saqlagan holda tanlov hajmini sozlaydi. Erkin rejimga o'tish cheklovni olib tashlaydi, shuning uchun to'rtburchakni ixtiyoriy ravishda o'lchamlashingiz mumkin. Nisbat tasvir piksel koordinatalarida qo'llaniladi, shuning uchun eksport qilingan natija siz tanlagan tomonlar nisbatiga ega bo'ladi.

Rasm serverga yuklanadimi?

Yo'q. Rasm hech qachon qurilmangizni tark etmaydi. Sahifa brauzerning File API-dan rasmni xotiraga o'qish uchun va Canvas API-dan kesish va natijani eksport qilish uchun foydalanadi. Buni brauzeringizning DevTools Network panelini ochib tekshirishingiz mumkin — kesish paytida yagona chiquvchi so'rovlar sahifaning dastlabki yuklanishi va reklama chaqiruvlaridir. Hech qanday rasm ma'lumoti uzatilmaydi.

Aniq piksel koordinatalarini kiritib ma'lum bir maydonni kesish mumkinmi?

Joriy versiya kesish to'rtburchagini tasvir oldindan ko'rishda tortish interaktivligi orqali sozlaydi. Siz tanlovning X, Y, kenglik va balandligi uchun jonli piksel koordinatalarini o'qishingiz mumkin. Kesish to'rtburchagi uchun to'g'ridan-to'g'ri raqamli kiritish v1 da mavjud emas, lekin kelajakdagi yangilanish uchun rejalashtirilgan.

Asl rasmga nima bo'ladi?

Asl fayl qurilmangizda qoladi. Sahifa uni ko'rsatish va kesish uchun brazer xotirasiga o'qiydi, lekin manba faylni diskda hech qachon o'zgartirmaydi. Kesilgan natija siz alohida yuklab oladigan yangi fayldir. Asl fayl kompyuteringiz yoki telefoningizdagi asl joyida o'zgarishsiz qoladi.

Kesish uchun fayl hajmi chegarasi bormi?

Vosita yuklash zonasida har bir fayl uchun 30 MB chegarasiga rioya qiladi, bu past darajadagi qurilmalarda brazer xotirasini nazorat ostida ushlab turadi. Agar rasmingiz 30 MB dan katta bo'lsa, avval maxsus rasm o'lchamini o'zgartirish vositasidan foydalanib uni kichiklashtirishingiz, so'ngra kesish uchun bu yerga yuklashingiz mumkin.

Kesish mobil telefonlar va planshetlarda ishlaydimi?

Ha. Kesish tutqichlari sensorli maqsadlarni hisobga olgan holda o'lchamlangan va interaktivlik sichqoncha bosishlari va barmoq teginishlari bilan ishlaydigan pointer hodisalaridan foydalanadi. Telefon ekranida rasm oldindan ko'rish mavjud kenglikka moslashadi va boshqaruv elementlari bir qo'lda ishlatish uchun vertikal ravishda joylashadi.