G\u00fcn\u00fcm\u00fczde web uygulamalar\u0131, kullan\u0131c\u0131lara \u00e7e\u015fitli g\u00fc\u00e7l\u00fc ara\u00e7lar sunarak deneyimlerini zenginle\u015ftirmektedir. Bu ara\u00e7lardan biri de ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma yetene\u011fidir. \u0130ster bir hata raporlamak, ister bir i\u00e7eri\u011fi kaydetmek, isterse de bir an\u0131 yakalamak olsun, ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma i\u015flevi bir\u00e7ok senaryoda kritik \u00f6neme sahiptir. Bu teknik rehberde, Vue.js kullanarak bir ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma arac\u0131n\u0131n \u00f6n y\u00fcz (front-end) kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Bu rehber, Vue.js’in g\u00fcc\u00fcn\u00fc kullanarak modern, reaktif ve kullan\u0131c\u0131 dostu bir aray\u00fcz in\u015fa etmeye odaklanacakt\u0131r.<\/p>\n
Unutmamak gerekir ki, taray\u0131c\u0131 tabanl\u0131 JavaScript’in do\u011frudan i\u015fletim sisteminin veya ba\u015fka bir uygulaman\u0131n ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc almas\u0131 g\u00fcvenlik k\u0131s\u0131tlamalar\u0131 nedeniyle m\u00fcmk\u00fcn de\u011fildir. Genellikle bu t\u00fcr bir i\u015flevsellik, bir arka u\u00e7 (backend) servisi (\u00f6rne\u011fin, Node.js ile Puppeteer\/Playwright gibi ara\u00e7lar) veya taray\u0131c\u0131n\u0131n kendi ekran payla\u015f\u0131m API’leri ( Yeni bir Vue.js projesi olu\u015fturarak i\u015fe ba\u015flayal\u0131m. Modern Vue projeleri i\u00e7in Vite’\u0131 kullanmak, daha h\u0131zl\u0131 geli\u015ftirme deneyimi sa\u011flar.<\/p>\n Terminalinizde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak yeni bir Vue projesi olu\u015fturabilirsiniz:<\/p>\n Bu komutlar, temel bir Vue 3 projesi olu\u015fturacak ve geli\u015ftirme sunucusunu ba\u015flatacakt\u0131r. Taray\u0131c\u0131n\u0131zda Uygulamam\u0131z i\u00e7in ana bile\u015fenimiz \u0130lk olarak, navigator.mediaDevices.getDisplayMedia()<\/code>) arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015ftirilir. Biz bu rehberde, \u00f6n y\u00fczdeki “ekran g\u00f6r\u00fcnt\u00fcs\u00fc al” d\u00fc\u011fmesine bas\u0131ld\u0131\u011f\u0131nda bir arka u\u00e7tan g\u00f6r\u00fcnt\u00fc URL’si al\u0131p bunu g\u00f6steren bir aray\u00fcz olu\u015fturmaya odaklanaca\u011f\u0131z. Ger\u00e7ek ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma mekanizmas\u0131, bu rehberin kapsam\u0131 d\u0131\u015f\u0131ndad\u0131r ve genellikle arka u\u00e7ta halledilir veya sayfa i\u00e7eri\u011fini yakalamak i\u00e7in html2canvas<\/code> gibi k\u00fct\u00fcphaneler kullan\u0131l\u0131r.<\/p>\nProje Kurulumu ve Temel Yap\u0131land\u0131rma<\/h2>\n
Vue Projesi Olu\u015fturma<\/h3>\n
npm init vue@latest\nProje ad\u0131n\u0131 girin (\u00f6rn: screenshot-tool-ui)<\/h2>\n
TypeScript, JSX, Router, Pinia vb. i\u00e7in varsay\u0131lan se\u00e7enekleri kabul edebilir veya reddedebilirsiniz.<\/h2>\ncd screenshot-tool-ui\nnpm install\nnpm run dev\n<\/code><\/pre>\n
http:\/\/localhost:5173\/<\/code> adresine giderek varsay\u0131lan Vue uygulamas\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\nTemel Bile\u015fen Yap\u0131s\u0131<\/h3>\n
App.vue<\/code> olacak. Ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma d\u00fc\u011fmesi ve \u00e7ekilen g\u00f6r\u00fcnt\u00fcy\u00fc g\u00f6sterecek ayr\u0131 bile\u015fenler olu\u015fturarak kodumuzu daha d\u00fczenli hale getirece\u011fiz.<\/p>\n\n
src\/App.vue<\/code>: Ana uygulama bile\u015feni.<\/li>\nsrc\/components\/ScreenshotButton.vue<\/code>: Ekran g\u00f6r\u00fcnt\u00fcs\u00fc alma d\u00fc\u011fmesi.<\/li>\nsrc\/components\/ScreenshotPreview.vue<\/code>: \u00c7ekilen ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc g\u00f6steren alan.<\/li>\n<\/ul>\nApp.vue<\/code> dosyam\u0131z\u0131n i\u00e7eri\u011fini basitle\u015ftirelim:<\/p>\n\n Ekran G\u00f6r\u00fcnt\u00fcs\u00fc Alma Arac\u0131<\/h2>\n \n <\/div>\n<\/template>\n\n