Ბიზნეს გეგმა 

მიაწოდეთ საჭირო ინფორმაცია სასურველ კლიენტებს. გაყიდვების მთავარი პრობლემა არის თქვენი ღირებულების მომხმარებლებისთვის გადაცემის შეუძლებლობა. როგორ სწორად ვისაუბროთ პროდუქტზე ან მომსახურებაზე

განვიხილოთ სამი მარტივი გზები, რომელიც შეიძლება გამოყენებულ იქნას ვებსაიტზე გამოსახულების მხოლოდ ნაწილის საჩვენებლად. გაითვალისწინეთ, რომ ამ მეთოდებით სურათი არ იჭრება გარკვეულ ზომაზე ფაქტიურად, მაგრამ აჩვენებს მხოლოდ იმ ნაწილს, რომელიც უნდა დავინახოთ და მალავს არასაჭირო არეალს.

ეს მეთოდები შეიძლება იყოს ძალიან სასარგებლო, თუ საჭიროა სურათის ზომის შეცვლა ან გადახედვის შექმნა, მაგალითად, ახალი ამბების წყაროში და ა.შ.

მეთოდი 1: უარყოფითი მინდვრების გამოყენება

სურათი უნდა განთავსდეს მშობელ ელემენტში, ჩვენს შემთხვევაში div. მთავარი ელემენტი უნდა იყოს მოძრავი ელემენტი (ან მითითებული სიგანე). მეთოდი არ იმუშავებს ბლოკის დონის ან სრული სიგანის ელემენტებზე.

მოდით დავაყენოთ უარყოფითი მინდვრები ოთხივე მხარისთვის: ზედა (ზემოდან), მარჯვნივ (მარჯვნივ), ქვედა (ქვემოდან) და მარცხენა (მარცხნივ). უარყოფითი მინდვრები განსაზღვრავს, თუ რამდენად არის ამოჭრილი ძირითადი ელემენტის სურათი თითოეული მიმართულებით. შემდეგი, ჩვენ დავაყენებთ მშობელი ელემენტის overflow თვისებას დამალულად, რათა დავიმალოთ მინდვრები, რომლებიც არის ამოჭრილი სურათის არეალის უკან.

    <div class = "crop" >

    მოსავლელი

    float: მარცხენა;

    გადინება: დამალული;

    Crop img

    ზღვარი: -70px -50px -160px -175px;

მეთოდი 2: აბსოლუტური პოზიციონირების გამოყენება

ამ მეთოდის გამოყენებით, ჩვენ ვაყენებთ მშობელი ელემენტის სიგანეს და სიმაღლეს და ვაყენებთ პოზიციის თვისებას შედარებით. სიგანე და სიმაღლე განსაზღვრავს ნაჩვენები ველის ზომებს. მშობელი ელემენტის შიგნით გამოსახულებისთვის დააყენეთ პოზიციონირების თვისება აბსოლუტურზე. შემდეგ, ზედა და მარცხენა თვისებების გამოყენებით, ჩვენ ვაყენებთ სურათის რომელი ნაწილის ჩვენებას.

    <div class = "crop" >

    მოსავლელი

    float: მარცხენა;

    გადინება: დამალული;

    პოზიცია: ნათესავი;

    სიგანე: 270px;

    სიმაღლე: 260px;

    Crop img

    პოზიცია: აბსოლუტური;

    ზედა: -70px;

    მარცხენა: -175px;

მეთოდი 3: სრიალის თვისების გამოყენება

ეს მეთოდი ყველაზე მარტივია, რადგან clip თვისება განსაზღვრავს ელემენტის იმ ნაწილს, რომელიც უნდა იყოს ნაჩვენები. მაგრამ ამ მეთოდს ორი ნაკლი აქვს.

პირველ რიგში, მოჭრილი ელემენტი უნდა იყოს განლაგებული აბსოლუტურად. ასე რომ, ჩვენ უნდა დავამატოთ დამატებითი ელემენტი, გამოვთვალოთ სურათის ხილული ფართობის ზომა, დავამატოთ ეს ზომა და დავაყენოთ float თვისება მშობელზე.

მეორეც, ხილული არეალის ზომა არ მცირდება ამოჭრილი ნაწილის ზომამდე, არამედ რჩება მთელი სურათის ზომის ტოლი (ამოჭრილი ნაწილის გარეთ არე მხოლოდ იმალება). ჩვენ უნდა გამოვიყენოთ აბსოლუტური პოზიციონირება, რათა გადავიტანოთ ხილული ადგილი მშობლის ზედა მარცხენა კუთხეში.

    <div class = "crop" >

    მოსავლელი

    float: მარცხენა;

    პოზიცია: ნათესავი;

შეიტყვეთ, როგორ შეცვალოთ და ამოჭრათ სურათები JavaScript-ისა და HTML5 Canvas ელემენტის გამოყენებით, საკონტროლო საშუალებების გამოყენებით, რომლებიც ნახეთ ფოტო რედაქტირების აპებში:

ამ სტატიაში მე გაჩვენებთ, თუ როგორ შეცვალოთ და ამოჭრათ სურათები HTML5 ელემენტის გამოყენებით , და რადგან ჩვენ უკვე ამას ვაკეთებთ, მოდით ასევე შევქმნათ სურათის ზომის შეცვლის ის მაგარი სამართავი, რომელსაც ხშირად ხედავთ ფოტო რედაქტირების აპებში.

ცოცხალ გარემოში, ვებსაიტმა ან აპმა შეიძლება გამოიყენოს ეს ტექნიკა, რათა შეცვალოს და შექმნას პროფილის ფოტო ჩატვირთვამდე.

ჩვენ შეგვიძლია ამის გაკეთება სერვერზე, თუმცა ამას დასჭირდება პოტენციურად დიდი ფაილების გადატანა, რასაც დიდი დრო დასჭირდება. ამის ნაცვლად, ჩვენ შეგვიძლია შევცვალოთ სურათის ზომა კლიენტის მხარეს, სანამ ის ჩაიტვირთება. რაც საშუალებას მოგცემთ გააკეთოთ ყველაფერი ბევრად უფრო სწრაფად.

ამისათვის ჩვენ შევქმნით HTML5 ელემენტს და გამოიტანეთ სურათი ტილოზე კონკრეტული ზომით, შემდეგ კი მიიღეთ ახალი სურათის მონაცემები ტილოდან URI მონაცემების სახით.

ბრაუზერების უმეტესობა უკვე მხარს უჭერს ამ მეთოდებს, ასე რომ თქვენ სავარაუდოდ შეძლებთ ამ ტექნიკის დაუყოვნებლივ განხორციელებას. თუმცა, თქვენ უნდა იცოდეთ გარკვეული შეზღუდვები, რომლებიც არ არის მხარდაჭერილი ბრაუზერების მიერ, როგორიცაა გამოსახულების ხარისხი და შესრულება.

ძალიან დიდი სურათების ზომის შეცვლამ შეიძლება გამოიწვიოს ბრაუზერის შენელება, ან ზოგიერთ შემთხვევაში აპლიკაციის გათიშვაც კი. აქედან გამომდინარე, აზრი აქვს დაწესდეს გონივრული ლიმიტები ფაილის ზომაზე, რომლის ატვირთვაც შესაძლებელია. თუ ხარისხი თქვენთვის მნიშვნელოვანია, შეიძლება ეს ტექნიკა შეუსაბამო აღმოჩნდეთ, რადგან ბრაუზერი დამუშავების დროს სურათის ხარისხს შეამცირებს.

არსებობს მრავალი ტექნიკა, რომელიც შეიძლება გამოყენებულ იქნას ტილოდან მასშტაბირებული სურათების ხარისხის გასაზრდელადთუმცა, ამ სტატიაში მათ არ განვიხილავთ.

თქვენ შეგიძლიათ ნახოთ საბოლოო შედეგი ამ დემო ვერსიაში, ან შეგიძლიათ ჩამოტვირთოთ ZIP არქივი.

აბა, ახლა დავიწყოთ!

მარკირება

ჩვენს დემო ვერსიაში დავიწყებთ არსებული სურათით:

Სულ ეს არის! ეს არის მთელი HTML, რომელიც დაგვჭირდება ამ დემოსთვის.

CSS

CSS ასევე ძალიან მინიმალურია. პირველ რიგში, მოდით განვსაზღვროთ სტილის შეცვლა კონტეინერის და სურათისთვის:

ზომის შეცვლა-კონტეინერი (პოზიცია: ფარდობითი; ეკრანი: ბლოკი; კურსორი: გადაადგილება; ზღვარი: 0 ავტომატური; ) .resize-container img ( ჩვენება: დაბლოკვა) მონახაზი: 2px წყვეტილი rgba(222,60,80,.9); )

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( პოზიცია: აბსოლუტური; ჩვენება: ბლოკი; სიგანე: 10px; სიმაღლე: 10px; ფონი: rgba(222,60,80,.9); z-ინდექსი: 999; ) .resize-handle-nw ( ზედა: -5px; მარცხენა: -5px; კურსორი: nw-resize;) .resize-handle- sw ( ქვედა: -5px; მარცხნივ: -5px; კურსორი: sw-size; ) .resize-handle-ne ( ზევით: -5px; მარჯვნივ: -5px; კურსორი: ne-size; ) .resize-handle-se ( ქვედა: -5 პიქსელი; მარჯვნივ: -5 პიქსელი; კურსორი: ზომის შეცვლა;)

JavaScript

JavaScript-ს ვიწყებთ რამდენიმე ცვლადის განსაზღვრით და ტილოსა და სამიზნე სურათის ინიციალიზაციის გზით:

var resizeableImage = ფუნქცია (image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), შეზღუდვა = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("ტილო"); )); resizeableImage($(".resize-image"));

შემდეგ ჩვენ ვქმნით init ფუნქციას, რომელიც გამოიძახება ჩატვირთვისთანავე. ეს ფუნქცია ახვევს სურათს კონტეინერში, ქმნის ზომის შეცვლის სახელურებს და ქმნის ორიგინალური სურათის ასლს, რომელიც გამოიყენება ზომის შესაცვლელად.

ჩვენ ასევე ვანიჭებთ JQuery ობიექტს კონტეინერის ელემენტისთვის ცვლადს, რათა მოგვიანებით შეგვეძლოს მასზე წვდომა და დავამატოთ მაუსის ჩამორთმევის ღონისძიების მსმენელი, რომელიც აღმოაჩენს, როდესაც ვინმე იწყებს ერთ-ერთი სახელურის გადათრევას:

var resizeableImage = ფუნქცია(image_target) ( // ... init = function())( // შექმენით ახალი სურათი ორიგინალური src-ის ასლით // როდესაც ჩვენ ვიცვლით გამოსახულების ზომას, ჩვენ ყოველთვის ვიყენებთ ამ ასლს, როგორც საფუძველს orig_src .src=image_target.src ; // ზომის შეცვლა მარკერების დამატება $(image_target).wrap("

"). ადრე (" "). ადრე (" "). შემდეგ (" "). შემდეგ (" "); // მიიღეთ ცვლადები კონტეინერისთვის $container = $(image_target).parent(".resize-container"); // მოვლენების დამატება $container.on("mousedown", ".resize-handle", startResize) ; ); //... მასში(); )

startResize და endResize ფუნქციები მხოლოდ ბრაუზერს ეუბნება, რომ დაიწყოს თვალყურის დევნება, სადაც მოძრაობს მაუსი და შეწყვიტოს თვალყურის დევნება:

startResize = ფუნქცია(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize );); endResize = ფუნქცია(e)( e.preventDefault(); $(დოკუმენტი).off("mouseup touchend", endResize);$(document).off("mousemove touchmove", resizing); );

სანამ მაუსის პოზიციის თვალყურის დევნებას დავიწყებთ, უნდა გადავიღოთ კონტეინერის ზომები და სხვა ძირითადი მონაცემები.

ჩვენ მათ ვინახავთ ცვლადში, რომელსაც ეწოდება event_state და მოგვიანებით ვიყენებთ საწყის წერტილად სიმაღლისა და სიგანის შეცვლისას:

saveEventState = ფუნქცია(e)( // შეინახეთ მოვლენის საწყისი პარამეტრები და კონტეინერის მდგომარეობა event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container .offset().left ; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft (); event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // ეს არის პატჩი მობილური Safari-სთვის // რატომღაც , მას არ შეუძლია უშუალოდ შეხების თვისებების კოპირება, თუ (ტიპი e.originalEvent.touches !== "განსაზღვრული")( event_state.touches = ; $.each(e.originalEvent.touches, ფუნქცია(i, ob)( event_state.touches[i ] = (); მოვლენა_მდგომარეობა.შეხება [i].კლიენტიX = 0+ობი.კლიენტX; მოვლენა_სახელმწიფო.შეხება[i].კლიენტი = 0+ობი.კლიენტი; )); ) მოვლენა_მდგომარეობა.evnt = e;)

ზომის შეცვლის ფუნქცია არის ადგილი, სადაც ხდება მოქმედებების უმეტესობა. ეს ფუნქცია მუდმივად იძახება, როდესაც მომხმარებელი გადაათრევს ზომის ერთ-ერთ სახელურს. ამ ფუნქციის გამოძახებისას ჩვენ ვქმნით ახალ სიგანეს და სიმაღლეს მაუსის ამჟამინდელ პოზიციასა და მომხმარებლის მიერ გამოყვანილი კუთხის თავდაპირველ პოზიციას შორის კავშირის გამოთვლით:

ზომის შეცვლა = ფუნქცია(e)( var მაუსი=(),სიგანე,სიმაღლე,მარცხნივ,ზედა,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); სიგანე = მაუსი. x - event_state.container_left; სიმაღლე = mouse.y - event_state.container_top; მარცხენა = event_state.container_left; ზედა = event_state.container_top; if(შეზღუდვა || e.shiftKey)( სიმაღლე = სიგანე / orig_src. სიგანე * orig_src.he; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ resizeImage(width, height); // Без этого Firefox не будем пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

შემდეგ ჩვენ ვამატებთ ოფციას სურათის ზომის შეზღუდვისას Shift კლავიშის ან ცვლადის გამოყენებით გადართვისას.

დაბოლოს, ჩვენ ვცვლით გამოსახულების ზომას, მაგრამ მხოლოდ იმ შემთხვევაში, თუ ახალი სიგანე და სიმაღლე იქნება იმ ცვლადების მინიმალურ და მაქსიმალურ მნიშვნელობებში, რომლებიც დასაწყისში დავაყენეთ.

შენიშვნა: ვინაიდან ჩვენ რეალურად ვცვლით გამოსახულების ზომას და არა მხოლოდ სიმაღლისა და სიგანის ატრიბუტებს, შეგიძლიათ გაითვალისწინოთ რამდენად ხშირად შეიძლება გამოიძახოთ resizeImage შესრულების მიზეზების გამო. ამას ჰქვია გაფუჭება ან ჩახშობა.

სურათის რეალური ზომის შეცვლა

თქვენ შეგიძლიათ უბრალოდ დახატოთ სურათი drawImage-ის გამოყენებით. ჩვენ ჯერ ვადგენთ ტილოს სიმაღლეს და სიგანეს და ყოველთვის ვიყენებთ სრული ზომის გამოსახულების ორიგინალურ ასლს. შემდეგ ჩვენ ვიყენებთ toDataURL ტილოზე, რათა მივიღოთ ახლახან შეცვლილი სურათის Base64 კოდირებული ვერსია და განვათავსოთ იგი გვერდზე.

ამოკვეთის განყოფილება გთავაზობთ სრულ ახსნას ყველა იმ ვარიანტისთვის, რომელიც შეიძლება გამოყენებულ იქნას drawImage მეთოდით:

resizeImage = ფუნქცია (სიგანე, სიმაღლე)( resize_canvas.width = სიგანე; resize_canvas.height = სიმაღლე; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, სიგანე, სიმაღლე); $(image_target).attr( "src", resize_canvas.toDataURL("image/png")); );

Ძალიან ადვილი? არსებობს ერთი მცირე სიფრთხილე: სურათი უნდა განთავსდეს იმავე დომენზე, როგორც გვერდი, ან სერვერზე გაცვლის უნარი სხვადასხვა წყაროსთან (CORS). წინააღმდეგ შემთხვევაში შეიძლება შეგექმნათ პრობლემები შეცდომებთან დაკავშირებით " დაზიანებული ტილო«.

ზომის შეცვლა სხვადასხვა კუთხით

ახლა თქვენ უნდა გქონდეთ სამუშაო დემო ვერსია. მაგრამ ეს ყველაფერი არ არის. ჩართულია ამ მომენტში, ის ჯერ არ მუშაობს ისე, რომ ზომის შეცვლა ხდება ისე, თითქოს ჩვენ ვათრევთ ქვედა მარჯვენა კუთხეს, არ აქვს მნიშვნელობა რომელი კუთხიდან ვცვლით გამოსახულების ზომას.

ჩვენ უნდა შევძლოთ სურათის ზომის შეცვლა ნებისმიერი კუთხიდან. ამისათვის ჩვენ უნდა გავიგოთ ჩვენი დემო მოდელის ქცევა.

ზომის შეცვლისას კუთხე, რომელსაც ჩვენ ვაჭიანებთ, ისევე როგორც მისი მიმდებარე გვერდები, უნდა მოძრაობდეს, ხოლო მოპირდაპირე კუთხე და მისი მიმდებარე გვერდები ადგილზე უნდა დარჩეს:

როდესაც ჩვენ შევცვლით სურათის სიგანეს და სიმაღლეს, მარჯვენა და ქვედა კიდეები გადაადგილდება, ხოლო ზედა და მარცხენა კიდეები დარჩება ადგილზე. ეს ნიშნავს, რომ ნაგულისხმევად, სურათების ზომა იცვლება ქვედა მარჯვენა კუთხიდან.

ჩვენ არ შეგვიძლია ამ ნაგულისხმევი ქცევის შეცვლა, მაგრამ ზომის შეცვლისას ნებისმიერი კუთხიდან, გარდა ქვედა მარჯვენა, ჩვენ შეგვიძლია შევცვალოთ ზოგადი პოზიციაგამოსახულება ისე, რომ ჩანდეს, თითქოს მოპირდაპირე კუთხე და მიმდებარე კიდეები რჩება ადგილზე. მოდით განვაახლოთ ჩვენი ზომის შეცვლის ფუნქცია:

ზომის შეცვლა = ფუნქცია(e)( var მაუსი=(),სიგანე,სიმაღლე,მარცხნივ,ზედა,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // სურათის პოზიცია განსხვავებულად არის დამოკიდებული იმ კუთხით, რომელსაც ჩვენ გადავათრევთ if($(event_state.evnt.target).hasClass("resize-handle-se"))( width = mouse.x - event_state.container_left; სიმაღლე = mouse.y - event_state .container_top; left = event_state.container_left; top = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state. კონტეინერი_მარცხენა); სიმაღლე = mouse.y - event_state.container_top; მარცხენა = mouse.x; ზედა = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw" ))( სიგანე = event_state.container_width - (mouse.x - event_state.container_left); სიმაღლე = event_state.container_height - (mouse.y - event_state.container_top); მარცხენა = მაუსი.x; ზედა = მაუსი.y; if(შეზღუდვა || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - სიმაღლე); ) ) else if($(event_state.evnt.target).hasClass("ზომის შეცვლა -handle-ne"))( სიგანე = მაუსი.x - event_state.container_left; სიმაღლე = event_state.container_height - (mouse.y - event_state.container_top); მარცხენა = event_state.container_left; ზედა = მაუსი.y; if(შეზღუდვა | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - სიმაღლე); ) ) // სურვილისამებრ მხარდაჭერილი ასპექტის თანაფარდობა if(constrain || e.shiftKey)( სიმაღლე = სიგანე / orig_src.width * orig_src.height; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ // Для увеличения производительности вы можете ограничить количество вызовов resizeImage() resizeImage(width, height); // Без этого Firefox не будет пересчитывать размеры изображения, пока перетаскивание не завершилось $container.offset({"left": left, "top": top}); } }

ჩვენი კოდი ახლა ამოწმებს, თუ რომელი ზომის შეცვლის სახელური არის გადატანილი და გადაადგილებს ჩვენს სურათს ისე, რომ შესაბამისი კუთხე სტაციონარული ჩანდეს.

სურათის გადატანა

ახლა, როდესაც ჩვენ შეგვიძლია შევცვალოთ გამოსახულების ზომა მისი რომელიმე კუთხის გადმოწევით, თქვენ შეიძლება შეამჩნიეთ, რომ ჩვენ შეგვიძლია უნებურად შევცვალოთ სურათის პოზიცია გვერდზე.

ახლა ჩვენ უნდა დავრწმუნდეთ, რომ სურათი დაბრუნდება ჩარჩოს ცენტრში. init ფუნქციაში დავამატოთ სხვა მოვლენის ტრეკერი, მსგავსი, რაც ადრე შევქმენით:

init = ფუნქცია())( //... $container.on("mousedown", "img", startMoving); )

ახლა ჩვენ დავამატებთ startMoving და endMoving ფუნქციებს, ისევე როგორც დავამატეთ startResize და endResize:

startMoving = ფუნქცია(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving );); endMoving = ფუნქცია(e)( e.preventDefault(); $(დოკუმენტი).off("mouseup", endMoving);$(document).off("mousemove", move); );

მოძრავ ფუნქციას სჭირდება კონტეინერის ზედა მარცხენა კიდის ახალი პოზიციის გამოთვლა. ეს ტოლი იქნება მაუსის ამჟამინდელი პოზიციისა, რომელიც გადაინაცვლებს ზედა მარცხენა კუთხიდან მაუსამდე მანძილით, როდესაც დავიწყეთ სურათის გადატანა:

მოძრავი = ​​ფუნქცია(e)( var მაუსი=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); მაუსი .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(("მარცხნივ": mouse.x - (event_state.mouse_x - event_state.container_left), "ზედა" : mouse.y - (event_state.mouse_y - event_state.container_top) )); );

სურათის ამოჭრა

ახლა, როდესაც ჩვენ შეგვიძლია სურათის ზომის შეცვლა, შეიძლება დაგჭირდეთ მისი ამოჭრა. იმის ნაცვლად, რომ მომხმარებლებს მივცეთ გამოსახულების ნებისმიერი ზომისა და ფორმის ამოჭრის შესაძლებლობა, მოდით შევქმნათ ჩარჩო, რომელსაც აქვს ზუსტი ზომები, რომელიც ჩვენ გვჭირდება და მოვიწვიოთ მომხმარებლები, რომ მოათავსონ სურათი ამ ჩარჩოში.

ისინი შეძლებენ დაადგინონ ამოჭრილი ჩარჩოს მასშტაბი და პოზიცია თავდაპირველ სურათზე და ჩვენ, თავის მხრივ, დარწმუნებული ვიქნებით, რომ საბოლოო გამოსახულება ყოველთვის იგივე ფორმა და ზომა ექნება.

ამისათვის ჩვენ უნდა დავამატოთ შემდეგი HTML კოდი:

გადაფარვის ჩარჩოს სტილები ძალიან მნიშვნელოვანია, განსაკუთრებით პოზიცია, სიგანე და სიმაღლე, რადგან ისინი გამოიყენება იმის დასადგენად, თუ რამდენი სურათი იქნება ამოჭრილი.

ასევე მნიშვნელოვანია გვახსოვდეს, რომ ჩარჩო ყოველთვის უნდა იყოს ხილული ნებისმიერი ფერის ფონზე. ამიტომაც ჩემს მაგალითში გამოვიყენე ნახევრად გამჭვირვალე თეთრი მონახაზი მთავარი ფანჯრის გარშემო:

გადაფარვა ( პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზევით: 50%; ზღვარი მარცხნივ: -100 პიქსელი; ზღვარი ზევით: -100 პიქსელი; z-ინდექსი: 999; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; კონტური: მყარი 2 პx rgba( 222,60,80,.9); ყუთის ზომა: შინაარსი-ყუთი; მაჩვენებელი-მოვლენები: არცერთი; ) .გადაფარვა: შემდეგ, .გადაფარვა: ადრე ( შინაარსი: ""; პოზიცია: აბსოლუტური; ჩვენება: ბლოკი; სიგანე: 204 პიქსელი; სიმაღლე: 40 პიქსელი; საზღვარი მარცხნივ: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); კონტური მარჯვნივ: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); ) .გადაფარვა: ადრე ( ზედა: 0; ზღვარი-მარცხნივ: -2 პიქსელი; ზღვარი-ზემო: -40 პიქსელი; ) .გადაფარვა: შემდეგ (ქვემოთ: 0; ზღვარი მარცხნივ: -2 პიქსელი; ზღვარი-ქვედა: -40 პიქსელი; ) .გადაფარვა-შიდა: შემდეგ, .გადაფარვა -შიდა: ადრე (შინაარსი: ""; პოზიცია: აბსოლუტური; ეკრანი: ბლოკი; სიგანე: 40 პიქსელი; სიმაღლე: 204 პიქსელი; საზღვრის ზედა: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); საზღვარი ქვედა: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); ) .გადაფარვა-შიდა: ადრე ( მარცხნივ: 0; ზღვარი მარცხნივ: -40 პიქსელი; ზღვარი-ზემო: -2 პიქს; ) .გადაფარვა-შიდა: შემდეგ (მარჯვნივ: 0; margin-right: -40px; margin-top: -2px;) .btn-crop (პოზიცია: აბსოლუტური; ვერტიკალური გასწორება: ქვედა; მარჯვნივ: 5px; ქვედა: 5px; padding: 6px 10px; z-ინდექსი: 999; ფონის ფერი: rgb(222,60,80); საზღვარი: არცერთი; საზღვარი-რადიუსი: 5px; ფერი: #FFF; )

დაამატეთ შემდეგი ფუნქცია და მოვლენის ტრეკერი თქვენს JavaScript-ში:

init = ფუნქცია())( //... $(".js-crop").on("დაწკაპუნება", ამოჭრა); ); crop = ფუნქცია())( var crop_canvas, მარცხენა = $(".overlay").offset().left - $container.offset().მარცხნივ, ზევით = $(".overlay").offset().top - $container.offset().ზედა, სიგანე = $(".გადაფარვა").სიგანე(), სიმაღლე = $(".გადაფარვა").სიმაღლე(); crop_canvas = document.createElement ("ტილო"); crop_ტილო . სიგანე = სიგანე; crop_canvas.height = სიმაღლე; crop_canvas.getContext("2d").drawImage(image_target, მარცხენა, ზედა, სიგანე, სიმაღლე, 0, 0, სიგანე, სიმაღლე); window.open(crop_canvas.toDataURL(" სურათი /png"));)

Crop ფუნქცია მსგავსია resizeImage ფუნქციისა, მაგრამ იმის ნაცვლად, რომ მას გადავიტანოთ სიმაღლისა და სიგანის მნიშვნელობა, ჩვენ ვიღებთ სიმაღლეს და სიგანეს გადაფარვის ელემენტიდან.

ტილოს drawImage მეთოდი მოითხოვს ცხრა პარამეტრს მოსაჭრისთვის. პირველი პარამეტრი არის გამოსახულების წყარო. შემდეგი ოთხი პარამეტრი მიუთითებს ორიგინალური გამოსახულების რა ნაწილზეა გამოყენებული (კლიპის ყუთი). ბოლო ოთხი პარამეტრი მიუთითებს ტილოზე სად უნდა გამოჩნდეს სურათი და რა ზომით.

სენსორული ღონისძიებების დამატება

მაუსის ჩამორთმევისა და მაუსის აწევისთვის არის ექვივალენტური სენსორული ღონისძიებები - touchstart და touchend, mousemov-ისთვის არის ექვივალენტური touchmove მოვლენა. ვინც ამ მოვლენებს დაასახელა, აშკარად აკლდა იუმორის გრძნობა, თორემ შესაძლოა მათ "ტაჩდაუნი" და "ტაშუპი" უწოდა.

მოდით დავამატოთ touchstart და touchend სადაც გვაქვს მაუსის ჩამორთმევა და მაუსის აპი და ჩავანაცვლოთ მაუსის მოძრაობა touchmove-ით:

// init()-ში... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //In startResize() ... $(document).on("mousemove touchmove", მოძრავი); $(დოკუმენტი).on("mouseup touchend", endMoving); //ინ endResize()... $(დოკუმენტი).off("mouseup touchend", endMoving); $(დოკუმენტი).off("mousemove touchmove", მოძრავი); // startMoving()-ში... $(დოკუმენტი).on("mousemove touchmove", მოძრავი); $(დოკუმენტი).on("mouseup touchend", endMoving); //endMoving()-ში... $(document).off("mouseup touchend", endMoving); $(დოკუმენტი).off("mousemove touchmove", მოძრავი);

ვინაიდან ჩვენ ვცვლით გამოსახულების ზომას, სამართლიანია იმის მოლოდინი, რომ ზოგიერთ მომხმარებელს სურს გამოიყენოს საერთო მოქმედებები, როგორიცაა გამოსახულების გაჭიმვა. არსებობს Hammer ბიბლიოთეკა, რომელიც შეიცავს ბევრ მოსახერხებელ ხელსაწყოს სენსორულ მოვლენებთან მუშაობისთვის.

მაგრამ რადგან ჩვენ მხოლოდ დაჭიმვა გვჭირდება, ამის გარეშეც შეგვიძლია. ახლა მე გაჩვენებთ, თუ რამდენად ადვილია გაჭიმვის შექმნა მესამე მხარის ბიბლიოთეკის გამოყენების გარეშე.

შესაძლოა შენიშნეთ, რომ saveEventState ფუნქცია უკვე ინახავს ორიგინალურ შეხების მონაცემებს; ჩვენ ეს ახლა დაგვჭირდება.

პირველ რიგში, ვამოწმებთ, შეიცავს თუ არა მოვლენა ორ „შეხებას“ და ვზომავთ მათ შორის მანძილს. ჩვენ აღვნიშნავთ ამას, როგორც თავდაპირველ მანძილს და შემდეგ ვზომავთ რამდენად იცვლება ეს მანძილი გადაადგილებისას. მოდით განაახლოთ მოძრავი ფუნქცია:

მოძრავი = ​​ფუნქცია(ე)( var მაუსი=(), შეხება; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; მაუსი.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset((" მარცხენა": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // აკონტროლეთ გაჭიმვა გადაადგილებისას if(event_state.touches && event_state) .touches.length > 1 && touches.length > 1)( var სიგანე = event_state.container_width, სიმაღლე = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a ;b = e.originalEvent.touches.clientY - touches.clientY;b = b * b;var dist2 = Math.sqrt(a + b); var თანაფარდობა = dist2 /dist1; სიგანე = სიგანე * თანაფარდობა; სიმაღლე = სიმაღლე * თანაფარდობა; // შესრულების გასაუმჯობესებლად, შეგიძლიათ შეზღუდოთ ზარების რაოდენობა resizeImage() resizeImage(სიგანე, სიმაღლე); ) );

მიმდინარე მანძილს ვყოფთ საწყის მანძილზე, რათა განვსაზღვროთ თანაფარდობა და შესაბამისად გამოვიყენოთ გამოსახულების მასშტაბირება. ჩვენ ვიანგარიშებთ ახალ სიგანეს და სიმაღლეს და შემდეგ ვცვლით გამოსახულების ზომას:

Სულ ეს არის. ისევ უყურეთ დემო ვერსიას ან ჩამოტვირთეთ ZIP არქივი.

ტესტირებისას დავინახე, რომ Chrome ბლოკავს ნაგულისხმევ ბრაუზერს გაჭიმვაზე რეაგირებისგან, მაგრამ Firefox კარგად მუშაობს.

იმედი მაქვს, რომ ეს სტატია თქვენთვის სასარგებლო აღმოჩნდა. მოგიწოდებთ, წაიკითხოთ სხვა სტატიები გადასატან ელემენტებზე და ფაილების ატვირთვის მეთოდებზე და ნახოთ, როგორ აერთიანებენ სხვა ადამიანები ამ ტექნიკას ლამაზი მომხმარებლის ინტერფეისის შესაქმნელად.

ეს პუბლიკაცია არის სტატიის თარგმანი სურათების ზომის შეცვლა და ამოჭრა ტილოთი“, მომზადებული მეგობრული პროექტის გუნდის მიერ

ამ სტატიაში ჩვენ ვისწავლით, თუ როგორ შევცვალოთ სურათების ზომა და ამოჭრათ HTML5 ელემენტის გამოყენებით, და სანამ მასზე ვართ, მოდით, მართვის პულებს მივცეთ თანამედროვე დიზაინი, ისევე როგორც ფოტო რედაქტორებში.

დღესდღეობით ბევრი ვებ გვერდი და ვებ აპლიკაცია აღჭურვილია გამოსახულების დამუშავების ტექნოლოგიით. ეს შეიძლება გაკეთდეს სერვერის მხარეს, რაც გამოიწვევს დროის ხარჯებს პოტენციურად დიდი სურათის ტრანსპორტირებისთვის. ამის თავიდან ასაცილებლად, პროცესის დასაჩქარებლად შეგიძლიათ სურათების დამუშავება კლიენტის აპარატზე.

ჩვენ ამას გავაკეთებთ ტილოს მეშვეობით, ვხატავთ სურათებს სასურველ ზომაზე, შემდეგ მივიღებთ ახალ სურათებს. ბევრი ბრაუზერი მხარს უჭერს ამ მეთოდს, ასე რომ, ჩვენ შეგვიძლია დაუყოვნებლივ დავიწყოთ მხოლოდ მცირე შესრულების შეზღუდვებით.

დიდი სურათების ფორმატირებამ შეიძლება შეანელოს ბრაუზერი ან გამოიწვიოს მისი საერთოდ გაჩერება. ეს გვაიძულებს ვიფიქროთ ატვირთულ სურათებზე შეზღუდვების დაწესებაზე. თუ მიღებული სურათების ხარისხი მნიშვნელოვანია, მაშინ შეიძლება გაგვიკვირდეს, რაში აქცევს მათ ბრაუზერი. ინტერნეტში შეგიძლიათ იპოვოთ რამდენიმე ტექნოლოგია გამოსახულების დამუშავების ხარისხის გასაუმჯობესებლად, მაგრამ ჩვენ მათ აქ არ განვიხილავთ.

ამ მიზნით ჩვენ ვიწყებთ მუშაობას!

მარკირება

ჩვენს დემოში ჩვენ ვიმუშავებთ ერთ მოცემულ სურათთან:

ყველა! ჩვენ არ გვჭირდება სხვა HTML.

CSS

CSS კოდი არც ისე დიდი იქნება. მოდით განვსაზღვროთ სტილის შეცვლა-კონტეინერი და თავად სურათი.

ზომის შეცვლა-კონტეინერი (პოზიცია: ფარდობითი; ეკრანი: ბლოკი; კურსორი: გადაადგილება; ზღვარი: 0 ავტომატური; ) .resize-container img ( ჩვენება: დაბლოკვა) მონახაზი: 2px წყვეტილი rgba(222,60,80,.9); )

ახლა მოდით დავაყენოთ პოზიციები და სტილები თითოეული "ზომის შეცვლის სახელურებისთვის". ეს არის პატარა კვადრატები, რომლებიც განლაგებულია სურათების კუთხეებში, რომლებსაც გადავათრევთ გამოსახულების ზომის შესაცვლელად.

Resize-handle-ne, .resize-handle-ne, .resize-handle-se, .resize-handle-nw, .resize-handle-sw ( პოზიცია: აბსოლუტური; ჩვენება: ბლოკი; სიგანე: 10px; სიმაღლე: 10px; ფონი: rgba(222,60,80,.9); z-ინდექსი: 999; ) .resize-handle-nw ( ზედა: -5px; მარცხენა: -5px; კურსორი: nw-resize;) .resize-handle- sw ( ქვედა: -5px; მარცხნივ: -5px; კურსორი: sw-size; ) .resize-handle-ne ( ზევით: -5px; მარჯვნივ: -5px; კურსორი: ne-size; ) .resize-handle-se ( ქვედა: -5 პიქსელი; მარჯვნივ: -5 პიქსელი; კურსორი: ზომის შეცვლა;)

JavaScript

დავიწყოთ Canvas-ში ცვლადის და ტილოს შექმნით.

Var resizeableImage = ფუნქცია (image_target) ( var $container, orig_src = new Image(), image_target = $(image_target).get(0), event_state = (), შეზღუდვა = false, min_width = 60, min_height = 60, max_width = 800, max_height = 900, resize_canvas = document.createElement("ტილო"); )); resizeableImage($(".resize-image"));

ახლა შევქმნათ ტრიგერის ფუნქცია, რომელიც დაუყოვნებლივ იმუშავებს. ეს ფუნქცია მუშაობს იმ კონტეინერთან, რომელშიც არის სურათი, ადგენს ზომას და აკოპირებს ორიგინალ სურათს ამოსაჭრელად. ჩვენ ასევე ვანიჭებთ jQuery ობიექტს, რათა მოგვიანებით მივმართოთ მას და გამოვიყენოთ მაუსის გადაადგილების ოპერატორები მაუსის გადაწევაზე რეაგირებისთვის.

Var resizeableImage = ფუნქცია(image_target) ( // ... init = function())( // შექმენით ახალი სურათი ორიგინალური src-ის ასლით // ზომის შეცვლისას ჩვენ ყოველთვის გამოვიყენებთ ამ ორიგინალურ ასლს, როგორც საბაზისო orig_src. src =image_target.src; //დაამატე ზომის შეცვლა სახელურები $(image_target).wrap("

"). ადრე (" "). ადრე (" "). შემდეგ (" "). შემდეგ (" "); // მიიღეთ ცვლადი სთვისკონტეინერი $container = $(image_target).parent(".resize-container"); // მოვლენების დამატება $container.on("mousedown", ".resize-handle", startResize); ); //... მასში(); )

startResize და endResize ფუნქციები ბრაუზერს ეუბნება, როდის უნდა დაიწყოს მაუსის მოძრაობაზე ყურადღების მიქცევა და როდის შეჩერდეს.

StartResize = ფუნქცია(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", resizing); $(document).on("mouseup", endResize );); endResize = ფუნქცია(e)( e.preventDefault(); $(დოკუმენტი).off("mouseup touchend", endResize);$(document).off("mousemove touchmove", resizing); );

სანამ მაუსის თვალყურის დევნებას დაიწყებთ, გვერდის მოთხოვნისას უნდა დაასკანიროთ კლიენტის მიმდინარე პარამეტრები. ჩვენ მათ ვინახავთ event_state ცვლადში და მოგვიანებით ვიყენებთ ჩვენს მუშაობაში.

SaveEventState = ფუნქცია(e)( // შეინახეთ საწყისი მოვლენის დეტალები და კონტეინერის მდგომარეობა event_state.container_width = $container.width(); event_state.container_height = $container.height(); event_state.container_left = $container.offset(). მარცხენა; event_state.container_top = $container.offset().top; event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches.clientX) + $(window).scrollLeft(); event_state. mouse_y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // ეს არის შესწორება მობილური Safari-სთვის // რატომღაც ის არ იძლევა საშუალებას touches თვისების პირდაპირი ასლი if(typeof e.originalEvent.touches !== "undefined")( event_state.touches = ; $.each(e.originalEvent.touches, function(i, ob)( event_state.touches[i] = (); მოვლენა_მდგომარეობა.შეხება[i].კლიენტიX = 0+ob.clientX; მოვლენა_სახელმწიფო.touches[i].clientY = 0+ob.clientY; )); ) მოვლენა_მდგომარეობა.evnt = e; )

ზომის შეცვლის ფუნქცია ყველაზე მნიშვნელოვანია. ის გააქტიურებულია სურათის დაჭიმვისას. ყოველ ჯერზე ჩვენ ვიანგარიშებთ გამოსახულების ახალ ზომებს კვადრატების ახალი პოზიციის მიხედვით.

ზომის შეცვლა = ფუნქცია(e)( var მაუსი=(),სიგანე,სიმაღლე,მარცხნივ,ზედა,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); სიგანე = მაუსი. x - event_state.container_left; სიმაღლე = mouse.y - event_state.container_top; მარცხენა = event_state.container_left; ზედა = event_state.container_top; if(შეზღუდვა || e.shiftKey)( სიმაღლე = სიგანე / orig_src. სიგანე * orig_src.he; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

შემდეგი, ჩვენ დავამატებთ ოფციას სურათის ზომის შეზღუდვისთვის Shift კლავიშის ან ცვლადის გამოყენებით.

შენიშვნა: ვინაიდან ჩვენ რეალურად ვცვლით გამოსახულების ზომას და არა უბრალოდ ვაძლევთ მას ახალ სიგრძეს და სიმაღლეს, ღირს ვიფიქროთ იმაზე, თუ რამდენად შეგვიძლია გამოვიყენოთ resizeImage ფუნქცია სერვერის მუშაობის გასაკონტროლებლად.

ახალი სურათების ზომები

ტილოზე სურათების დახატვა ისეთივე მარტივია, როგორც drawImage. ჩვენ ვადგენთ გამოსახულების სიმაღლეს და სიგრძეს და შემდეგ ვაძლევთ ორიგინალს. ჩვენ ასევე ვიყენებთ toDataURL ოპერაციის შედეგის Base64-ით დაშიფრული ვერსიის მისაღებად.

მოცემულია ამ ოპერაციისთვის ხელმისაწვდომი ვარიანტების სრული ახსნა.

ResizeImage = ფუნქცია(სიგანე, სიმაღლე)( resize_canvas.width = სიგანე; resize_canvas.height = სიმაღლე; resize_canvas.getContext("2d").drawImage(orig_src, 0, 0, სიგანე, სიმაღლე); $(image_target).attr( "src", resize_canvas.toDataURL("image/png")); );

Ძალიან ადვილი? არსებობს ერთი გაფრთხილება: სურათი უნდა განთავსდეს იმავე დომენზე, როგორც ჩვენი გვერდი, ან . თუ ეს ასე არ არის, მაშინ პრობლემები შეგექმნებათ "დაბინძურებულ ტილოსთან".

იზრდება სხვა წვეროებით

ახლა თქვენ უნდა გქონდეთ სამუშაო დემო ვერსია. მაგრამ ჯერ არ დასრულებულა. ამ დროისთვის ჩვენ შეგვიძლია მხოლოდ სურათის გაჭიმვა ერთი კუთხით, მაგრამ გვინდა გამოვიყენოთ ოთხივე. ამისათვის თქვენ უნდა გესმოდეთ როგორ მუშაობს.

როდესაც სურათს ვჭიმავთ, გამართული კუთხის მიმდებარე კუთხეებიც უნდა მოძრაობდეს, მაგრამ გამოსახულების საპირისპირო ბოლო უნდა დაფიქსირდეს.

ჩვენ შეგვიძლია შევცვალოთ კოდი ისე, რომ როდესაც გამოსახულება დაჭიმულია ნებისმიერი კუთხით, ის იცვლება. მოდით განვაახლოთ ზომის შეცვლის ფუნქცია:

ზომის შეცვლა = ფუნქცია(e)( var მაუსი=(),სიგანე,სიმაღლე,მარცხნივ,ზედა,offset=$container.offset(); mouse.x = (e.clientX || e.pageX || e.originalEvent.touches .clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || e.originalEvent.touches.clientY) + $(window).scrollTop(); // სურათის პოზიცია განსხვავებულად დამოკიდებულია გადმოწეული კუთხისა და შეზღუდვების მიხედვით if($(event_state.evnt.target).hasClass("resize-handle-se"))( სიგანე = მაუსი.x - event_state.container_left; სიმაღლე = მაუსი.y - event_state.container_top ; მარცხენა = event_state.container_left; ზედა = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-sw"))( width = event_state.container_width - (mouse.x - event_state .container_left); სიმაღლე = mouse.y - event_state.container_top; მარცხენა = mouse.x; ზედა = event_state.container_top; ) else if($(event_state.evnt.target).hasClass("resize-handle-nw")) ( სიგანე = მოვლენა_სახელმწიფო.კონტეინერის_სიგანე - (მაუსი.x - მოვლენა_სახელმწიფო.კონტეინერი_მარცხნივ); სიმაღლე = მოვლენა_სახელმწიფო.კონტეინერის_სიმაღლე - (მაუსი.y - მოვლენა_სახელმწიფო.კონტეინერი_ტოპ); მარცხენა = მაუსი.x; ზედა = მაუსი.y; if(შეზღუდვა || e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - სიმაღლე); ) ) else if($(event_state.evnt.target).hasClass("ზომის შეცვლა -handle-ne"))( სიგანე = მაუსი.x - event_state.container_left; სიმაღლე = event_state.container_height - (mouse.y - event_state.container_top); მარცხენა = event_state.container_left; ზედა = მაუსი.y; if(შეზღუდვა | | e.shiftKey)( top = mouse.y - ((width / orig_src.width * orig_src.height) - სიმაღლე); ) ) // სურვილისამებრ შეინარჩუნოს ასპექტის თანაფარდობა if(შეზღუდვა || e.shiftKey)( სიმაღლე = სიგანე / orig_src.width * orig_src.height; ) if(width > min_width && height > min_height && width< max_width && height < max_height){ // To improve performance you might limit how often resizeImage() is called resizeImage(width, height); // Without this Firefox will not re-calculate the the image dimensions until drag end $container.offset({"left": left, "top": top}); } }

ახლა ჩვენ ვამოწმებთ, რომელი ზომის შეცვლის სახელური იყო გამოყენებული და გამოვიყენებთ საჭირო ცვლილებებს.

სურათის გადატანა

ახლა, როდესაც ჩვენ შეგვიძლია შევცვალოთ სურათის ზომა, თქვენ შეიძლება შეამჩნიეთ, რომ ის ზოგჯერ "გამოდის". საჭიროა დაემატოს ობიექტის გადატანის შესაძლებლობა ჩარჩოს ცენტრში. მოდით გავაფართოვოთ ჩვენი ინიციალიზაციის ფუნქცია ოდნავ.

Init = ფუნქცია())( //... $container.on("mousedown", "img", startMoving); )

ახლა ჩვენ დავამატებთ ფუნქციებს startMoving და endMoving, მსგავსი startResize და endResize.

StartMoving = ფუნქცია(e)( e.preventDefault(); e.stopPropagation(); saveEventState(e); $(document).on("mousemove", move); $(document).on("mouseup", endMoving );); endMoving = ფუნქცია(e)( e.preventDefault(); $(დოკუმენტი).off("mouseup", endMoving);$(document).off("mousemove", move); );

მოძრავ ფუნქციაში უნდა გამოვიმუშაოთ მარცხენა ზედა კვადრატის პოზიცია. იგი ტოლი უნდა იყოს საწყისთან მცირე ოფსეტით, რომელიც გამოითვლება სხვა კვადრატების მოძრაობით.

Moving = ფუნქცია(e)( var mouse=(); e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); მაუსი .y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset(("მარცხნივ": mouse.x - (event_state.mouse_x - event_state.container_left), "ზედა" : mouse.y - (event_state.mouse_y - event_state.container_top) )); );

სურათის ამოჭრა

ახლა, როდესაც ვისწავლეთ ზომის შეცვლა, ჩვენ უნდა დავამატოთ სურათის ამოჭრა. იმის ნაცვლად, რომ მომხმარებლებს მივცეთ საშუალება, იბრძოლონ მოსავლის ზომებთან დაკავშირებით, მოდით შევქმნათ ჩარჩო, რომელიც უნდა განთავსდეს სწორ ადგილას და ყველაფერი ამოიჭრება მის გარშემო. ეს მათ შესაძლებლობას მისცემს, მოარგონ გამოსახულება, როგორც უნდათ, ამავდროულად, შედეგად მიღებული გამოსახულებები ზომით ერთგვაროვანი გახადონ.

ამისათვის თქვენ უნდა დაამატოთ შემდეგი HTML კოდი:

მნიშვნელოვანია გვახსოვდეს, რომ ჩარჩო ყოველთვის უნდა იყოს განსხვავებული ფერის გვერდის ფონისგან, წინააღმდეგ შემთხვევაში შეიძლება პრობლემები წარმოიშვას.

გადაფარვა ( პოზიცია: აბსოლუტური; მარცხნივ: 50%; ზევით: 50%; ზღვარი მარცხნივ: -100 პიქსელი; ზღვარი ზევით: -100 პიქსელი; z-ინდექსი: 999; სიგანე: 200 პიქსელი; სიმაღლე: 200 პიქსელი; კონტური: მყარი 2 პx rgba( 222,60,80,.9); ყუთის ზომა: შინაარსი-ყუთი; მაჩვენებელი-მოვლენები: არცერთი; ) .გადაფარვა: შემდეგ, .გადაფარვა: ადრე ( შინაარსი: ""; პოზიცია: აბსოლუტური; ჩვენება: ბლოკი; სიგანე: 204 პიქსელი; სიმაღლე: 40 პიქსელი; საზღვარი მარცხნივ: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); კონტური მარჯვნივ: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); ) .გადაფარვა: ადრე ( ზედა: 0; ზღვარი-მარცხნივ: -2 პიქსელი; ზღვარი-ზემო: -40 პიქსელი; ) .გადაფარვა: შემდეგ (ქვემოთ: 0; ზღვარი მარცხნივ: -2 პიქსელი; ზღვარი-ქვედა: -40 პიქსელი; ) .გადაფარვა-შიდა: შემდეგ, .გადაფარვა -შიდა: ადრე (შინაარსი: ""; პოზიცია: აბსოლუტური; ეკრანი: ბლოკი; სიგანე: 40 პიქსელი; სიმაღლე: 204 პიქსელი; საზღვრის ზედა: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); საზღვარი ქვედა: წყვეტილი 2 პიქსელი rgba(222,60,80,.9); ) .გადაფარვა-შიდა: ადრე ( მარცხნივ: 0; ზღვარი მარცხნივ: -40 პიქსელი; ზღვარი-ზემო: -2 პიქს; ) .გადაფარვა-შიდა: შემდეგ (მარჯვნივ: 0; margin-right: -40px; margin-top: -2px;) .btn-crop (პოზიცია: აბსოლუტური; ვერტიკალური გასწორება: ქვედა; მარჯვნივ: 5px; ქვედა: 5px; padding: 6px 10px; z-ინდექსი: 999; ფონის ფერი: rgb(222,60,80); საზღვარი: არცერთი; საზღვარი-რადიუსი: 5px; ფერი: #FFF; )

ასევე განვაახლოთ JavaScript კოდი:

Init = ფუნქცია())( //... $(".js-crop").on("click", crop); ); crop = ფუნქცია())( var crop_canvas, მარცხენა = $(".overlay").offset().left - $container.offset().მარცხნივ, ზევით = $(".overlay").offset().top - $container.offset().ზედა, სიგანე = $(".გადაფარვა").სიგანე(), სიმაღლე = $(".გადაფარვა").სიმაღლე(); crop_canvas = document.createElement ("ტილო"); crop_ტილო . სიგანე = სიგანე; crop_canvas.height = სიმაღლე; crop_canvas.getContext("2d").drawImage(image_target, მარცხენა, ზედა, სიგანე, სიმაღლე, 0, 0, სიგანე, სიმაღლე); window.open(crop_canvas.toDataURL(" სურათი /png"));)

Crop ფუნქცია მსგავსია resizeImage. ერთადერთი განსხვავება ისაა, რომ ჩარჩოს პოზიციიდან ვიღებთ ზომებს და ჩამოჭრის პოზიციას.

მოსაჭრელად, თქვენ უნდა დააყენოთ ცხრა პარამეტრი ტილოში ოპერატორს drawImage. პირველი არის ორიგინალური სურათი. შემდეგი ოთხი არის ის ადგილები, რომლებიც გამოიყენება ოპერაციისთვის. კიდევ ოთხი არის იმ ადგილის კოორდინატი, სადაც უნდა დაიწყოთ ტილოზე ხატვა და რა ზომის იქნება გამოსახულება.

შეხების და ჟესტების ამოცნობის დამატება

ჩვენ შევქმენით მაუსის მხარდაჭერა. ყურადღებას ნუ მოვაკლებთ და მობილური მოწყობილობები.

მაუსის ჩამორთმევისა და მაუსის აწევისთვის არის ექვივალენტური ოპერატორები - touchstart და touchend , ხოლო mousemove -სთვის არის touchmove . ფრთხილად უნდა იყოთ, რომ არ აურიოთ ისინი შეხება-დაშვებით (თორემ სასაცილო იქნება).

მოდით დავამატოთ touchstart და touchend ყველგან, სადაც ჩვენ გვაქვს მაუსის ჩამორთმევა, და მაუსის აწევა touchmove-სთან ერთად, სადაც კი გვაქვს მაუსის გადაადგილება.

// init()-ში... $container.on("mousedown touchstart", ".resize-handle", startResize); $container.on("mousedown touchstart", "img", startMoving); //In startResize() ... $(document).on("mousemove touchmove", მოძრავი); $(დოკუმენტი).on("mouseup touchend", endMoving); //ინ endResize()... $(დოკუმენტი).off("mouseup touchend", endMoving); $(დოკუმენტი).off("mousemove touchmove", მოძრავი); // startMoving()-ში... $(დოკუმენტი).on("mousemove touchmove", მოძრავი); $(დოკუმენტი).on("mouseup touchend", endMoving); //endMoving()-ში... $(document).off("mouseup touchend", endMoving); $(დოკუმენტი).off("mousemove touchmove", მოძრავი);

ვინაიდან ჩვენ მიერთებული მობილური მოწყობილობები გვაქვს, არსებობს შესაძლებლობა, მომხმარებელმა გამოიყენოს გამოსახულების თითებით „შეკუმშვის“ ჟესტი მისი დაპატარავებისთვის. არსებობს ერთი ძალიან მოსახერხებელი ბიბლიოთეკა სახელად Hammer, რომელიც საშუალებას გაძლევთ ამოიცნოთ მრავალი ჟესტი. მაგრამ, რადგან ჩვენ მხოლოდ ერთი გვჭირდება, მოკლედ დავწერთ დამატებითი სკრიპტების გარეშე.

თქვენ შეიძლება შეამჩნიეთ, რომ saveEventState ფუნქცია უკვე ინახება სენსორულ ინფორმაციაში. ახლა ჩვენ დაგვჭირდება.

ჯერ ვამოწმებთ „ორი შეხების“ არსებობას და მათ შორის მანძილს. ჩვენ ასევე ვუყურებთ, მცირდება თუ არა მათ შორის მანძილი გადაადგილებისას. ახლა განვაახლოთ მოძრაობა:

Moving = ფუნქცია(e)( var მაუსი=(), შეხება; e.preventDefault(); e.stopPropagation(); touches = e.originalEvent.touches; მაუსი.x = (e.clientX || e.pageX || touches.clientX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY || touches.clientY) + $(window).scrollTop(); $container.offset((" მარცხენა": mouse.x - (event_state.mouse_x - event_state.container_left), "top": mouse.y - (event_state.mouse_y - event_state.container_top) )); // თვალი ადევნეთ პინჩის მასშტაბის ჟესტს გადაადგილებისას if(event_state). ეხება && event_state.touches.length > 1 && touches.length > 1)( var სიგანე = event_state.container_width, სიმაღლე = event_state.container_height; var a = event_state.touches.clientX - event_state.touches.clientX; a = a * a ; var b = event_state.touches.clientY - event_state.touches.clientY; b = b * b; var dist1 = Math.sqrt(a + b); a = e.originalEvent.touches.clientX - touches.clientX; a = a * a; b = e.originalEvent.touches.clientY - touches.clientY; b = b * b; var dist2 = Math.sqrt(a + b); var თანაფარდობა = dist2 /dist1; სიგანე = სიგანე * თანაფარდობა; სიმაღლე = სიმაღლე * თანაფარდობა; // შესრულების გასაუმჯობესებლად შეიძლება შეზღუდოთ, თუ რამდენად ხშირად ეწოდება resizeImage() resizeImage(სიგანე, სიმაღლე); ) );

ამ მონაცემების საფუძველზე, ჩვენ ვამცირებთ ან ვადიდებთ ჩვენს სურათს და ვარეგულირებთ მის სიმაღლეს და სიგრძეს.

Სულ ეს არის. შეგიძლიათ გახსნათ

მოგესალმებით ყველას, მე მქვია ანა ბლოკი და დღეს ვისაუბრებთ იმაზე, თუ როგორ უნდა ამოიღოთ სურათები გრაფიკული პროგრამების გამოყენების გარეშე.

სად შეიძლება ეს სასარგებლო იყოს?

უპირველეს ყოვლისა, საიტებზე, სადაც სურათებით შინაარსი, სავარაუდოდ, არ იქნება ამოჭრილი რომელიმე კონკრეტული ბლოკისთვის.

თვალსაჩინო მაგალითი: ბლოგი WordPress-ზე.

ვთქვათ, გსურთ, რომ თქვენი სტატიის ყდას ჰქონდეს 1:1 (კვადრატული) თანაფარდობა. თქვენი ქმედებები:

  1. ჩამოტვირთეთ შესაფერისი სურათი ინტერნეტიდან;
  2. ჩამოაჭრეთ იგი Photoshop-ში სასურველ პროპორციებამდე;
  3. გამოაქვეყნეთ სტატია.

როდესაც თქვენ ეწვიეთ საიტს, ნახავთ შედეგს, რომელსაც ელოდით.

მაგრამ, დავუშვათ, დაგავიწყდათ სურათის ამოჭრა Photoshop-ში და გადმოწერეთ შემთხვევითი სურათი ინტერნეტიდან, რა იქნება მერე?! მართალია, განლაგება დაიშლება. და თუ თქვენ საერთოდ არ გამოგიყენებიათ CSS, მაშინ HD სურათს შეუძლია მთლიანად დაბლოკოს ტექსტის მთელი ხედი. აქედან გამომდინარე, მნიშვნელოვანია ვიცოდეთ, თუ როგორ უნდა ამოიღოთ სურათები CSS სტილის გამოყენებით.

მოდით შევხედოთ სხვადასხვა სიტუაციებიროგორ შეიძლება ეს განხორციელდეს არა მხოლოდ CSS, არამედ SVG გამოყენებით.

მაგალითი 1

შევეცადოთ ჩამოჭრათ სურათი, რომელიც განთავსებულია ფონის გამოსახულების გამოყენებით. მოდით შევქმნათ პატარა HTML მარკირება

მოდით გადავიდეთ CSS სტილზე. ფონის გამოსახულების გამოყენებით ჩვენ ვამატებთ სურათს, ვადგენთ ჩარჩოებს ჩვენი სურათისთვის, ცენტრალიზებულია სურათის ფონის პოზიციის გამოყენებით და ვაყენებთ ფონის ზომას:

jpg); ფონი-პოზიცია: ცენტრი ცენტრი; background-size:cover; სიგანე: 300px; სიმაღლე: 300px; )

ეს იყო პირველი და უმარტივესი მეთოდი გამოსახულების მოსაჭრელად. ახლა გადავხედოთ მეორე მაგალითს.

მაგალითი 2

დავუშვათ, ჩვენ ჯერ კიდევ გვაქვს იგივე ყუთის კონტეინერი, რომლის შიგნით არის img ტეგი გამოსახულებასთან ერთად, რომელსაც ახლა სტილში მივიღებთ.

ჩვენ ასევე გავამახვილებთ ჩვენს სურათს ცენტრთან მიმართებაში, რომელსაც შევქმნით. და ჩვენ ვიყენებთ თვისებას, რომელიც საკმაოდ იშვიათად გამოიყენება: object-fit .

ყუთი ( პოზიცია: ფარდობითი; გადინება: დამალული; სიგანე: 300 პიქსელი; სიმაღლე: 300 პიქს; ) .box img ( პოზიცია: აბსოლუტური; ზედა: 50%; მარცხნივ: 50%; ტრანსფორმაცია: თარგმნა (-50%, -50%); სიგანე: 300 პიქსელი; სიმაღლე: 300 პიქსელი; ობიექტის მორგება: საფარი; )

ჩემი აზრით ეს არის საუკეთესო მეთოდი. იდეალურია ბლოგებისთვის, თუ პოსტებისთვის იყენებთ სრულიად განსხვავებული პროპორციების სურათებს.

შეგიძლიათ მეტი გაიგოთ HTML და CSS-ის შესახებ აქ:

მაგალითი 3

ჩვენ ასევე შეგვიძლია შევქმნათ სურათების ამოჭრა იმ მომენტში, თუ მათ ჩავსვამთ SVG ელემენტებში. მაგალითად ავიღოთ წრე. ჩვენ შეგვიძლია შევქმნათ SVG ტეგების გამოყენებით. შექმენით svg საზღვრის ტეგი, რომელიც შეიცავს წრის ტეგს და შაბლონის ტეგს შიგნით. შაბლონის ტეგში ვწერთ სურათის ტეგს. მასში ვაზუსტებთ xlink:href ატრიბუტს და ვამატებთ სურათს. ჩვენ ასევე დავამატებთ სიგანისა და სიმაღლის ატრიბუტებს. მაგრამ ეს ყველაფერი არ არის. ჩვენ დაგვჭირდება შევსების მნიშვნელობის დამატება. იმისთვის, რომ ჩვენი ნამუშევარი დასრულებულად ჩაითვალოს, სურათის ტეგს დავამატებთ დამხმარე ატრიბუტს maintenanceAspectRatio, რომელიც საშუალებას მოგვცემს შეავსოთ ჩვენი სურათი „დასვლიდან ბოლომდე“ მთელი წრის გარშემო.

ამ მეთოდს უნივერსალურს ვერ ვუწოდებ. მაგრამ ის შეიძლება გამოყენებულ იქნას გამონაკლის შემთხვევებში. მაგალითად, თუ ჩვენ შევეხებით ბლოგის თემას, მაშინ ეს მეთოდი იდეალურად შეიძლება მოერგოს ავტორის ავატარს, რომელიც წერს სტატიას.

შეგიძლიათ მეტი გაიგოთ HTML და CSS-ის შესახებ აქ:

შედეგები:
ჩვენ გადავხედეთ საიტებზე სურათების ამოჭრის 3 მეთოდს: ფონის გამოსახულების გამოყენება, img ტეგის გამოყენებით და ასოცირებული svg შაბლონთან ბიტმაპ სურათების ჩასმა სურათის ტეგის გამოყენებით. თუ იცით SVG-ის გამოყენებით სურათის ამოჭრის სხვა მეთოდები, გააზიარეთ ისინი კომენტარებში. სასარგებლო იქნება არა მარტო ჩემთვის, არამედ სხვებისთვისაც მათ შესახებ ცოდნა.

არ დაგავიწყდეთ დაუსვათ თქვენი შეკითხვები განლაგების ან ფრონტის განვითარების შესახებ პროფესიონალებისგან FrontendHelp-ზე ონლაინ.

WEB-ისთვის სურათების მომზადებისას ხშირად ხდება მათი ამოჭრა, რათა გამოკვეთოს გამოსახულების აუცილებელი ნაწილები და ამოიჭრას არასაჭირო. წმინდა მხატვრული განსჯის გარდა, ფაილის ზომის შესამცირებლად საჭიროა ასეთი მორთვა ან, როგორც მას ასევე უწოდებენ, ჩამოჭრა. რაც უფრო პატარაა სურათი, მით უფრო მცირეა მისი ფაილის ზომა და მით უფრო სწრაფად იტვირთება ის ვებ გვერდზე.

როგორ ამოიღოთ გამოსახულების არასაჭირო ნაწილები

მოდი ვნახოთ, როგორ ხდება რეალურად მოჭრა ფოტოს ქვედა კიდეზე ვიწრო შავი ზოლის მოხსნით, რომელიც საკმარისად ვერ გაანათა. დაჭრა ხდება სპეციალური ხელსაწყოთი Crop Tool (C).

დააწკაპუნეთ Crop Tool (C) ღილაკზე Tools პანელზე, რომ აირჩიოთ ეს ინსტრუმენტი.

დააყენეთ მაუსის მაჩვენებელი გამოსახულების ზედა მარცხენა კუთხეში არსებულ ფორმაზე.

დააწკაპუნეთ და დააჭირეთ მაუსის მარცხენა ღილაკს.

მაუსის მარცხენა ღილაკის გათავისუფლების გარეშე, გადაიტანეთ მაუსის მაჩვენებელი ფოტოს მარჯვენა კიდეზე, ისე, რომ წერტილოვანი შერჩევის ჩარჩო, რომელიც გამოჩნდება, არ მოიცავდეს ვიწრო შავ ზოლს სურათის ქვედა საზღვარზე.

გაათავისუფლეთ მაუსის მარცხენა ღილაკი. ჩარჩო დაიბლოკება და მის კუთხეებში და გვერდების შუაში გამოჩნდება კვადრატული მარკერები. გამოსახულების არეალი ამოჭრილი ჩარჩოს გარეთ ჩაბნელდება, რაც მიუთითებს ფოტოს იმ ნაწილზე, რომელიც ამოჭრილია.

ამ მარკერების გამოყენებით შეგიძლიათ დაარეგულიროთ და გადაატრიალოთ ჩარჩოს საზღვარი. ჭრის ჩარჩოს გადასატანად, უბრალოდ მოათავსეთ მაუსის მაჩვენებელი არჩეულ ზონაში და გადაათრიეთ საჭირო სივრცე. არჩეული უბნის ზომის შესაცვლელად, გადაიტანეთ ერთ-ერთი კუთხის სახელური. თუ გადაადგილებისას დააჭირეთ Shift ღილაკს, არეალის პროპორციები შენარჩუნდება. ჩარჩოს დასატრიალებლად მოათავსეთ მაუსის მაჩვენებელი, რომელიც მიიღებს მრუდი ისრის ფორმას, შერჩევის ზონის გარეთ და მაუსის გადაადგილებით მიაღწევს ჩარჩოს შესაფერის პოზიციას. ჩამოჭრის გასაუქმებლად, უბრალოდ დააჭირეთ Esc ღილაკს.

შერჩევის ჩარჩოს სახელურების გადაადგილებით, დარწმუნდით, რომ ჭრის ჩარჩო მოიცავს მთელ სურათს, არ ჩავთვლით ვიწრო შავ ზოლს ფოტოს ქვედა საზღვრებში.

ორჯერ დააწკაპუნეთ ჩამოჭრის ველში ან დააჭირეთ Enter. ფოტო ჩამოიჭრება მითითებული საზღვრის გასწვრივ.

როგორ შევამციროთ სურათის ზომა

მაგრამ გადაჭრის შემდეგაც კი, ფოტო საკმაოდ დიდია ვებ გვერდისთვის. ეკრანის გარჩევადობით 800 x 600 პიქსელი (და სტატისტიკის მიხედვით, ვებ-მომხმარებლების უმეტესობა ამჟამად მუშაობს ამ გარჩევადობით), ფოტო დიდ ადგილს იკავებს ეკრანზე. გარდა ამისა, ამ ზომის გამოსახულების ფაილი საკმაოდ დიდი იქნება და ჩატვირთვას დიდი დრო დასჭირდება. ამიტომ, ჩვენ შევამცირებთ სურათის ზომას, რაც, თავის მხრივ, შეამცირებს ფაილის ზომას.

აირჩიეთ მენიუს ბრძანება Image - Image Size. ეკრანზე გამოჩნდება სურათის ზომის დიალოგი.

დიალოგის უმაღლეს ნაწილში, საკონტროლო ნაწილების ჯგუფში Pixel Dimensions (განზომილება პიქსელებში), მითითებულია ფაილის მიმდინარე ზომა PSD ფორმატში - 400.3K, ასევე მიმდინარე სიგანე (სიგანე) და სიმაღლე (სიმაღლე) სურათი პიქსელებში. თქვენი ღირებულებები მოსავლის შემდეგ შეიძლება ოდნავ განსხვავებული იყოს.

Document Size საკონტროლო ჯგუფში მითითებულია დოკუმენტის ზომა სანტიმეტრებში და მისი გრაფიკული გარჩევადობა (Resolution). როდესაც დაყენებულია შეზღუდვის პროპორციების დროშა, პროგრამა ავტომატურად ინახავს გამოსახულების პროპორციებს ერთ-ერთი განზომილების შეცვლისას - სიგანე ან სიმაღლე.

როდესაც თქვენ ცვლით სურათის ზომას საკონტროლო ნაწილების Pixel Dimensions ჯგუფში, მისი თვისებები დოკუმენტისთვის შესაბამისად იცვლება - მისი ზომები ან გრაფიკული გარჩევადობა, იმისდა მიხედვით, არის თუ არა Resample Image დროშის შემოწმება ან გასუფთავება. თუ ეს დროშა დაყენებულია, იცვლება დოკუმენტის ზომა და, შესაბამისად, სურათის ფაილის ზომა. თუ დროშა გასუფთავებულია, მაშინ მხოლოდ დოკუმენტის ზომები შეიძლება შეიცვალოს. ამ ყველაფერთან ერთად, შესაბამისად შეიცვლება მისი გრაფიკული გარჩევადობა და სურათის ზომა პიქსელებში და ფაილის ზომა კონფიგურაციის გარეშე დარჩება.

განზომილების ან გრაფიკული გარჩევადობის შემცირებისას Adobe Photoshopაშორებს ზედმეტ ინფორმაციას გამოსახულებადან და როდესაც ეს მახასიათებლები იზრდება, ის აყალიბებს დაკარგული ინფორმაციას არსებული პიქსელების ფერის მნიშვნელობებზე დაყრდნობით. ორივე შემთხვევაში, პროგრამა იყენებს ინტერპოლაციის 5 მეთოდს, რომელიც შეიძლება აირჩიოთ Resample Image ჩამოსაშლელ სიაში.

ვინაიდან ფოტო, რომლის ზომის შეცვლაც გვინდა, შეიქმნა ეკრანზე გამოსატანად, მისი გრაფიკული გარჩევადობა არ უნდა შეიცვალოს.

დარწმუნდით, რომ Resample Image ჩამრთველია, რათა შეინარჩუნოთ სურათის გრაფიკული გარჩევადობა და შეცვალოთ მისი ზომა.

საკონტროლო ნაწილების Pixel Dimensions ჯგუფის Width input ველში შეიყვანეთ სურათის სიგანის ახალი მნიშვნელობა პიქსელებში - 300. სიმაღლის შეყვანის ველში გამოსახულების სიმაღლის მნიშვნელობა ავტომატურად შეიცვლება, ასევე დოკუმენტის ზომა Document Size-ში. საკონტროლო ნაწილის ჯგუფი (დოკუმენტის ზომა). დიალოგის ზედა ნაწილში ასევე ნახავთ ფაილის ზომის ახალ, შემცირებულ მნიშვნელობას და მის გვერდით, ფრჩხილებში, წინა ტომს.

დახურეთ სურათის ზომის დიალოგი OK-ზე დაწკაპუნებით. გამოყენებული იქნება მითითებული მახასიათებლები და დოკუმენტის ფანჯარაში გამოსახულების ზომა შემცირდება.

როგორ ავიცილოთ თავიდან სურათის თვისებების დაკარგვა მისი ზომის შეცვლისას

როგორც უკვე აღვნიშნეთ, სურათის განზომილების შემცირება მისგან აშორებს სუპერზედმეტ ინფორმაციას, რაც იწვევს სიმკვეთრის გარკვეულ შემცირებას. Unsharp Mask ფილტრის გამოყენებამ შეიძლება გარკვეულწილად აღადგინოს გამოსახულების სიმკვეთრე.

აირჩიეთ მენიუს ბრძანება Filter - Sharpen - Unsharp Mask (ფილტრი - სიმკვეთრე - კონტურის სიმკვეთრე). ეკრანზე გამოჩნდება Unsharp Mask დიალოგი.

გადაიტანეთ თანხის სლაიდერი ფოტოს სიმკვეთრის აღსადგენად. ამ პარამეტრის მნიშვნელობა უნდა იყოს 50-60% ფარგლებში.

დააწკაპუნეთ OK-ზე, რათა დახუროთ Urisharp Mask დიალოგი. სურათი უფრო მკვეთრი გახდება.

შეინახეთ დოკუმენტი მენიუს ბრძანების File - Save არჩევით.

იმის გამო, რომ სურათის ზომის შეცვლისას მისი ხარისხი იკლებს არასაჭირო ინფორმაციის წაშლის გამო, ეს ოპერაცია თავიდან უნდა იქნას აცილებული, თუ ეს შესაძლებელია. თუ თქვენ სკანირებთ სურათს, უმჯობესია იპოვოთ მისი ზომა ამ ეტაპზე და დაასკანიროთ რეზოლუციით, რომელიც უზრუნველყოფს საუკეთესო ჩვენების ხარისხს.