Bir nedenle web sitemdeki sayfaların ekran görüntüsünü almak gerekti. İnternette biraz araştırma sonucunda bu işlemi yapabileceğim bir çok yöntem olduğunu farkettim. Fakat bu yöntemlerin bazılarının artık kullanılmadığını görünce güncel bir tane de ben yazayım dedim. (Yıl 2021)
Web sayfalarının ekran görüntülerini almak için bir çok yöntem olduğunu söylemiştim. İçlerinden en uygunu gerçek ekran görüntüsünü birebir alan Google Page Speed API olduğunu gördüm. Bu API ile ekran görüntüsünü almak için dahili olarak CHROME tarayıcını kullandığını ifade ediyor. PageSpeed Insights API Hakkında sayfasını ziyeret ederek daha detaylı bilgi alabilirsiniz.
URL ile Ekran Görüntüsünü Alma
Ekran görüntüsünü alma işlemini yapmadan önce HTML olarak sayfayı tasarlayalım. Aşağıdaki HTML kodları bootstrap kullanarak oluşturulmuştur.
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Take Website Screen Shot From URL in PHP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <meta name="theme-color" content="#7952b3"> </head> <body> <div class="container py-3"> <header> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h1 class="display-4 fw-normal">How to Take Website Screen Shot From URL in PHP</h1> </div> </header> <main> <form > <div class="form-row"> <div class="form-group col-md-8"> <label class="sr-only">Site</label> <input type="text" class="form-control" name="site" placeholder="https://site.com"> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-primary mb-2">Website Screen Shot</button> </div> </div> </form> <h2 class="display-6 text-center mb-4">Website Screen Shot</h2> <div class="col"> <?php if(isset($_GET['site'])){ ?> <img class="img-fluid" src="<?=$snap['data']?>" alt="snap"> <?php }else { ?> <h2 class="text-muted text-center mb-4">type a site name</h2> <?php } ?> </div> </main> </div> </body> </html> |
Ekran görüntüsünü curl kullanarak çekeceğiz. fakat Öncelikli olarak aşağıdaki bağlantılardan bir tane API anahtarına ve bir tane de bağlantı cümlesine ihtiyacımız var. Bunun için yazının sonudaki videodan destek alabilir yada aşağıdaki bağlantıdan bu işlemi kendiniz yapabilirsiniz.
API ve Bağlantı cümlesi oluşturma
Gerekli oluşturmaları yaptıktan sonra aşağıdaki gibi PHP kodlarını sayfanın başına ekliyoruz.
PHP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php if(isset($_GET['site'])){ $api ="YOUR_API"; $site =$_GET['site']; $adress="https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site&category=CATEGORY_UNSPECIFIED&strategy=DESKTOP&key=$api"; $curl_init = curl_init($adress); curl_setopt($curl_init,CURLOPT_RETURNTRANSFER,true); $response = curl_exec($curl_init); curl_close($curl_init); $googledata = json_decode($response,true); $snapdata = $googledata["lighthouseResult"]["audits"]["full-page-screenshot"]["details"]; $snap =$snapdata["screenshot"]; } ?> |
Video:
Tüm Kodlar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <?php if(isset($_GET['site'])){ $api ="YOUR_API"; $site =$_GET['site']; $adress="https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=$site&category=CATEGORY_UNSPECIFIED&strategy=DESKTOP&key=$api"; $curl_init = curl_init($adress); curl_setopt($curl_init,CURLOPT_RETURNTRANSFER,true); $response = curl_exec($curl_init); curl_close($curl_init); $googledata = json_decode($response,true); $snapdata = $googledata["lighthouseResult"]["audits"]["full-page-screenshot"]["details"]; $snap =$snapdata["screenshot"]; } ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How to Take Website Screen Shot From URL in PHP</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <meta name="theme-color" content="#7952b3"> </head> <body> <div class="container py-3"> <header> <div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <h1 class="display-4 fw-normal">How to Take Website Screen Shot From URL in PHP</h1> </div> </header> <main> <form > <div class="form-row"> <div class="form-group col-md-8"> <label class="sr-only">Site</label> <input type="text" class="form-control" name="site" placeholder="https://site.com"> </div> <div class="form-group col-md-4"> <button type="submit" class="btn btn-primary mb-2">Website Screen Shot</button> </div> </div> </form> <h2 class="display-6 text-center mb-4">Website Screen Shot</h2> <div class="col"> <?php if(isset($_GET['site'])){ ?> <img class="img-fluid" src="<?=$snap['data']?>" alt="snap"> <?php }else { ?> <h2 class="text-muted text-center mb-4">type a site name</h2> <?php } ?> </div> </main> </div> </body> </html> |
Merhabalar butona basıldığında mevcut sayfanın ekran görüntüsünü veritabanına kaydetmek istiyorum. Bu kod sadece crome tarayıcıda mı çalışıyor? Diğer tarayıcılarda çalışıyor mu?
Google api olduğu için her hangi bir tarayıcı olmasına gerek yok. Tüm tarayıcılar da kullanabilirsin.(api değişmesiyle hala çalışıyordur)