სურათის ამომჭრელი უფასოდ

როგორ მუშაობს

ჭრა მთლიანად თქვენს ბრაუზერში ხდება HTML5 Canvas API-ის გამოყენებით — ატვირთვის, სერვერის გარეშე. თქვენ გადაათრევთ არჩევის ზონას პირდაპირ canvas ელემენტზე, და ჭრის გამოყენებისას, ბრაუზერის ჩაშენებული 2D რენდერის ძრავი კითხულობს მხოლოდ არჩეულ პიქსელებს და მათ ხელახლა ჰკოდირებს JPEG, PNG ან WebP-ად.

1. 1
   სურათი იტვირთება მეხსიერებაში

   თქვენი ფაილი იკითხება URL.createObjectURL()-ით, რომელიც ბრაუზერს ლოკალურ ბლობის URL-ს გადასცემს. HTMLImageElement ფაილს მთლიანად ბრაუზერის ჩანართში დეკოდირებს — სურათის ბაიტები არასდროს ტოვებს თქვენს მოწყობილობას.
2. 2
   Pointer Events ატარებს ჭრის არჩევანს

   ბრაუზერის Pointer Events API (რომელიც აერთიანებს თაგუნას, შეხებისა და კალმის შეყვანას) თვალყურს ადევნებს გადათრევებს canvas-ის ზედადებულზე. არჩევანს გარეთ დაჭერა ახალ მართკუთხედს იწყებს; შიგნით დაჭერა მას ატანს; ქვედა-მარჯვენა კუთხესთან დაჭერა მას ცვლის ზომას. არასავალდებულო თანაფარდობის პრესეტები (1:1, 16:9, 4:3 და ა.შ.) გეომეტრიას შემოსაზღვრავს გადათრევისას.
3. 3
   Canvas ხატავს ცოცხალ გადახედვას

   ყოველ ჭრის ცვლილებაზე, Canvas 2D კონტექსტი ხელახლა ხატავს სურათს, არჩევანს გარეთ მუქ ზედადებულს იყენებს, ჭრის ზონას ასუფთავებს, ორიგინალი სურათის სრული ხარისხით საჩვენებლად, და ხატავს მესამედების-წესის ბადესა და ცისფერ ზომაცვლის სახელურს.
4. 4
   toBlob() ჰკოდირებს და აწვდის შედეგს

   „ჭრაზე“ დაწკაპუნებისას, ახალი ეკრანს-მიღმა canvas იქმნება ზუსტ ჭრის განზომილებებზე. ctx.drawImage() მხოლოდ არჩეულ მართკუთხედს კოპირებს, და canvas.toBlob() შედეგს ჰკოდირებს ბრაუზერის ბუნებრივი JPEG, PNG ან WebP ენკოდერით, თქვენ მიერ არჩეულ ხარისხის პარამეტრზე. გამომავალი უკან გადმოიცემა, როგორც ლოკალური ბლობის URL, ჩამოსატვირთად.

დაკავშირებული ინსტრუმენტები