Tarayıcı içeriğinin ekran görüntüsünü yakalama (web sitesi)

Amacım bir web sitesinin görüntüsüne sahip olmaktır (Evet, bu kadar basit). html2canvas gibi araçlar olduğunu biliyorum. Ancak istemci tarayıcısının ekran görüntüsünü oluşturmasını istemiyorum.

Bunun bir nedeni, temelde bir iFrame web görünümünde bir krom uzantı kullanmamdır >. Güvenlik nedeniyle, iFrame içeren bir web sitesi için ekran görüntüsü alması çalışmaz.

Ayrıca, web sitesi ekran görüntülerini yakalamayı destekleme yeteneği üzerinde çalıştıklarını da biliyorum. Bir çapraz tarayıcı çözümü istemek ve tarayıcının olasılığına bağlı olmamak. Bütün bunlar bir sunucu üzerinde gerçekleşir, bu yüzden komut satırı üzerinden çalıştırılabilir olmalıdır.

Şimdi ne yapıyorum:

  1. Open browser via command line
  2. Switch focus to browser window via command line
  3. Make screenshot (screencapture on mac, scrot on Linux) via command line

Bu temel seviyede yapmak, durum çubukları, tarayıcı eklentisi öğeleri vb. İçeren görüntünün dezavantajına sahiptir. Aslında, tüm bu uygulamaya özel şeyler olmadan yalnızca gerçek web sitesi içeriğine sahip olmak istiyorum.

  • En kötü çözüm, içeriğin 0 | 0 konumunu her tarayıcı için penceresine göre zorlamak olacaktır. Bu boktan (açık nedenlerden dolayı).
  • Karşılaştığım başka bir çözüm ise: tarayıcıya söyle (konuşabiliyorum) soket üzerinden bir eklentiye) x: 0; y: 0; adresindeki QR Kodu gibi bir şey eklemek için ekran görüntüsünü görüntü işleme sunucusuna gönderin. Bundan sonra QR Kodunu kaldırın ve ekran görüntüsünü tekrar gönderin. Sonra ben 0 | 0 ile ilgili her noktayı tanıyın, ancak o kadar da şık değil.

En iyi şey, bir uygulamanın hangi bölümünü bir resim çekmek istediğimi belirlememe izin veren bir komut satırı aracı olacaktır.

Bunun bir örneği Firefox için bu eklenti veya bu sunucu tarafı aracı veya this gibi farklı tarayıcılara ve işletim sistemine sahip web sitelerinin ekran görüntülerini sağlayan tüm bu araçlar . Tarayıcıya özgü GUI öğelerinden nasıl kurtulduklarını merak ediyorum.

Addition:

Bunu yeterince netleştirip çözemediğimi bilmiyorum, ancak belirli bir tarayıcı içeriğinin ekran görüntüsünü istiyorum ancak tarayıcıya özgü GUI öğeleri olmadan istiyorum. Bu, başsız bir tarayıcı çalıştıran bir uygulamanın benim için bir yararı olmayacağı anlamına geliyor. Çünkü başsız tarayıcının kendi motoru var. Özellikle, örneğin bir ekran görüntüsü almak istiyorum. Firefox sürüm x.

23
@Schnodderbalken Bununla birlikte, her tarayıcının tarayıcısını tam ekrana getirme anahtarı vardır, pencerelerde F11. Sürece programatik olarak kolayca bir tuşa basabilirsiniz.
katma yazar Francisco Aguilera, kaynak
Bu sadece geliştirme için mi yoksa ekran görüntüsü hizmeti/aracı mı oluşturmaya çalışıyorsunuz? Bu, hangi cevapların geçerli olduğunu etkileyebilir (bazıları diğerlerinden daha çok saldırıya uğramış).
katma yazar Christian Juth, kaynak
Bir komut satırı aracı tamamsa, hangi dillere ihtiyacınız vardır? Şu anda bunu JavaScript ile etiketlediniz.
katma yazar Sildoreth, kaynak
Firefox addon'un yalnızca addon tuvali kullandığı drawWindow API. Büyük olasılıkla bu site başsız bir tarayıcı kullanıyor. Her tarayıcı için ofsetleri hesaplamak yerine, tarayıcılar arası bir çözüm bulacağını sanmıyorum.
katma yazar Alexander O'Mara, kaynak
katma yazar Janom, kaynak
Bu firefox gcli komutları ekran görüntüsü. dxr.mozilla.org/mozilla-central/ source/toolkit/devtools/gcli & zwnj;/& hellip; , eklentiler kullanın.
katma yazar Janom, kaynak
Tarayıcının tam ekran modunu değiştirip tüm ekranı kapatamaz mısınız?
katma yazar Sebastian G. Marinescu, kaynak
En uygun durum tam sayfa olacaktır. Tarayıcı ile soket üzerinden konuşabildiğim ve çekip çekip sonra kaydırıp sonra çekip vuracağımı ve görüntüyü sunucuya koyabildiğimden bununla başa çıkabildim. Görüntüde çok az alakalı şeyler olması korkusuyla değil. çok fazla! (UI öğeleri)
katma yazar Schnodderbalken, kaynak
Tam ekran modunu dışarıdan nasıl değiştiririm? Her tarayıcının, her işletim sisteminde bir tarayıcının tam ekranda başlamasına neden olan bir parametre desteklediğini sanmıyorum ..: /
katma yazar Schnodderbalken, kaynak
Fakat bu ofsetleri nasıl hesaplarım? Görüntü işleme özellikleri ile sol üst bulmak için güvenilir bir yolu var mı?
katma yazar Schnodderbalken, kaynak
Kaydırılabilir öğeler geçerli tarayıcı çerçevesinde görünmese bile tam sayfa ekran görüntüsü almak ister misiniz? Veya görüntülenebilir alanın bir ekran görüntüsü yeterli olur?
katma yazar Avishek, kaynak

7 cevap

Selenyum hakkında bilginiz var mı? Belirli bir tarayıcıyı açan ve komut dosyasıyla yapılan testleri çalıştıran bir test aracıdır. Aynı zamanda ekran görüntüsü almak için de kullanılabilir.

This might be a solution to your problem.

7
katma
İnterneti tanımıyorum ama bir bakıp deneyebilirim. İdeal davranışınız nedir?
katma yazar Ivan Batić, kaynak
Tamam, iyi öneri. Belirli bir tarayıcı sürümünü başlatmak bile mümkün: stackoverflow.com/questions/16998503/… . Bunun nasıl yapıldığını biliyor musun? İçerik JavaScript'te mi oluşturuldu? Tüm yakalanıyor mu (aşağı kaydırma)? İframe gibi harici unsurlara sahip web sitelerini yakalamak mümkün müdür? Buna kesinlikle bir göz atacağım. Teşekkür ederim!
katma yazar Schnodderbalken, kaynak

Awesomescreenshot will actually scroll down the page taking actual screenshots, then put those images together into one long image for you. You can even set it to only capture the part of the page that's showing, or a selected section.

Bunu, Otomatik Kısayol Tuşları gibi bir makro türü program/komut dosyası diliyle karıştırabilirsiniz. Komut satırı kullanmaktan daha kolay olabilir veya olmayabilir. Sanırım ne yapmaya çalıştığınıza bağlı.

4
katma
Bu eklentiyi daha önce duymamıştım. Kulağa çok umut verici geliyor. Ayrıca, hem firefox hem de krom için kullanılabilir. Beni bu konuda rahatsız eden şey ekran görüntüsünün hala müşteri tarafında yakalanmasıdır (javascript kullanarak). Gerçekten emin olabilir miyim 1. Bu iframe'leri doğru bir şekilde oluşturacak (buna bir web görünümü kullandığım için ihtiyacım var) 2. Oluşturulan sayfa gibi% 100 görünüyor (ve% 100 demek istiyorum) çünkü bir piksel yapmak isteyebilirim -sonradan piksel karşılaştırması
katma yazar Schnodderbalken, kaynak
Kesin olarak söyleyemem. İnsanların bu konu hakkında konuştuklarını veya belgelerini bulamadıklarını bulamadım. Basit iframe sitelerinde test ettim ve sorun yok gibi görünüyor ve piksel piksel karşılaştırmalar da işe yarayacak gibi görünüyor. Web görünümleri hakkında emin değilim. Sizin için işe yarayıp yaramadığını bulmanın en hızlı yolu, muhtemelen kendi projenizde test etmektir.
katma yazar Jemmeh, kaynak

Çoğu sunucu tarafı dilleri yalnızca HTML’ye hizmet eder ve asla oluşturmaz. Bir süre önce, tek sayfa JavaScript uygulamalarını indeksleme sorunuyla karşılaştım ve çözümlerden biri phantomJS oldu.

PhantomJS tam olarak istediğini yapar. HTML'yi (sunum tarafı) oluşturabilirsiniz ve Phantom ayrıca yerleşik tuval içerdiğinden, ekran görüntüsünü kullanabilirsiniz. Phantom, web kit olduğu için popüler tarayıcıların çoğunu kapsayacaktır (Chrome, Safari, Opera). Web sitesinin Firefox'ta nasıl görüneceğini görmek istiyorsanız, SlimerJS 'i deneyebilirsiniz (PhantomJ’lere benzer ancak Gecko motorunu çalıştırır) ).

Bu, tüm popüler tarayıcıları kapsayacaktır (IE hariç). Bu hala kafasız bir çözüm, ancak farklı düzen motorlarını görebileceksiniz. NodeJS'ye ihtiyacınız olacak ve biraz öğrenme olabilir, ancak her ikisinin de ekran görüntüleri ile ilgili belgeleri var. İyi şanslar!

3
katma
Anlıyorum. Üzgünüm, bu aklıma gelen en iyi şey. Eğer bunu Geliştirme için sadece yapmaya çalışıyorsanız, bu kullandığım harika bir araçtır - vanamco.com/ghostlab. Ekran görüntüleri yaptığını sanmıyorum, ancak size bir web sitesinin canlı bir önizlemesini herhangi bir tarayıcıda ve bir kerede istediğiniz kadar verir.
katma yazar Christian Juth, kaynak
Benim hatam. Webkit ve Gecko'yu kapsayacak şekilde PhantomJS'i SlimerJS ile karıştırmayı deneyebilirsiniz ( slimerjs.org ). Bu, tüm popüler tarayıcıları kapsayacaktır. Bu hala kafasız bir çözüm, ancak farklı düzen motorlarını görebileceksiniz. Belirli tarayıcı sürümlerini görmeye çalışıyorsanız, korkarım size yardımcı olamam. Alt satırda bu zor bir konuya benziyor, bu nedenle başka bir çözüm bulamazsanız bunu deneyebilirsiniz.
katma yazar Christian Juth, kaynak
Son paragrafımdan alıntı yapıyorum: "Bunu yeterince açık yapıp yapmadığımı bilmiyorum, ancak belirli bir tarayıcı içeriğinin ekran görüntüsünü istiyorum, ancak tarayıcıya özgü GUI öğeleri olmadan istiyorum. Bu, başsız bir tarayıcı çalıştıran bir uygulamanın sahip olmayacağı anlamına gelir. kullanın. Çünkü başsız tarayıcının kendine ait bir motoru var. Özellikle, örneğin firefox x sürümünün bir ekran görüntüsüne sahip olmak istiyorum. " PhantomJS gibi başsız bir tarayıcı kullandıysam, tarayıcı x sürüm y'de aynı görüneceğinden asla emin olamadım, ancak tam olarak istediğim bu.
katma yazar Schnodderbalken, kaynak
Tamam, yine de teşekkürler :). Evet, bu bir çeşit çözüm olabilir. Ancak, yeni bir tarayıcı motoru her popüler olduğunda bir şeyi değiştirmek istemezseniz ve ilgili başsız tarayıcı uygulamasını beklersem ve görüntünün% 100 olduğundan emin olmak istersem, gerçek tarayıcı içinde aynıdır gitmenin yolu :(
katma yazar Schnodderbalken, kaynak

Bunu yapmanın 2 yolu vardır:

  1. Firefox veya Chrome için bir eklenti oluşturun

Ekran görüntüsü, sayfa üzerinde bir tuval kaplaması oluşturularak çekilir. Resim belgeden alınmıştır, bu nedenle tarayıcı kullanıcı arayüzü resmin bir parçası değildir.

  1. Tarayıcıyı yeniden oluşturun (PhantomJS, TrifleJS)

İlk etapta tarayıcı arayüzü yok.

1
katma
1.) "Ancak istemci tarayıcısının ekran görüntüsünü oluşturmasını istemiyorum." 2.) "Bu, başsız bir tarayıcı çalıştıran bir uygulamanın benim için bir faydası olmayacağı anlamına geliyor. Başsız bir tarayıcının kendine ait bir motoru var. Temelde her motor için başsız bir tarayıcı oluşturmak zorunda kalacağım ve aynı tarayıcıların farklı sürümlerinde farklı sonuçlara sahip olacak fonksiyonellikten yoksundur.
katma yazar Schnodderbalken, kaynak

Tarayıcı, sürüm ve os platformunun birçok kombinasyonu

Belirli tarayıcılara ve sürümlere sahip web sayfalarının ekran görüntülerini yakalamak için, tüm bu tarayıcılarda başlatılabilen, çalıştırılabilen ve yakalayabilen bir çerçeve gerektirir. Ayrıca, söz konusu tarayıcılar ve sürümlerle birlikte belirli platformlar için de gerekli olup olmadığı sorusu belirtilmemiştir. OSX, Windows, Linux, Android vb. Bu platformların farklı versiyonları olası kombinasyonları daha da artıracak.

  • Kurulum yapmanız, bu tarayıcıları korumanız gerekir
  • Bunları sürecek bir çerçeve bulun veya oluşturun, Selenyum muhtemelen en iyi bahsinizdir
  • Selenyum'da belirli tarayıcı/işletim sistemi kombinasyonları için destek eksikliğinin üstesinden gelin.
  • Bunu yöneten ve kullanımı için iyi bir API'deki gibi görünen bir altyapı

Bununla birlikte, bunun için mevcut bir çözüm veya ilgili bir çözüm vardır, örneğin:

Ekran görüntülerini gelince, belirli tarayıcı, sürüm, platform vb.

http://browsershots.org/ is free and has a large set of browser combos, not very clear if you can access it programmatically though.

Bunu yapmak sadece çağrı yapmak ve mevcut API'yi kullanmak

crossbrowsertesting.com, tüm gereklilikleri karşılayan bir ticari hizmettir (ücretsiz deneme).

Bunu yapabilen teknolojiye sahiptir

http://usersnap.com supports a lot of browsers, both desktop and mobile and has done a lot of work to get pixel perfect screenshot on servers, being identical to what user would see in their environment.

Mühendisler ihtiyaç olarak çözüme odaklanıyor ...

Mühendislik tipleri için çok tipik olduğu gibi, belirli bir çözümün nasıl uygulanacağına sıkışıp kaldık. Bu ekran görüntülerini elde etmenin hangi problemi çözeceği sorusu açık değil, yani temel şart. Eğer biliniyorsa, belki daha basit yaklaşımlar var mı?

1
katma

Açık kaynak kodlu ve aynı işlemi yapmak için para ödenen çeşitli araçlar var. Ancak, güvenlik nedenlerini göz önünde bulundurarak. Google’ın 'Sürücüye Kaydet' uzantısını kullanmanızı öneririm.

Bu, ekran görüntülerini doğrudan Google sürücünüze kaydetmenin daha güvenli bir yolunu ve ekran görüntüleriyle birlikte kullanıcıların resimleri veya diğer belgeleri Google sürücüye kaydetmelerini sağlar.

//İkinci Öneri//

Yukarıdaki uzantıyı kullanmak istemiyorsanız, 'Blipshot' kullanabilirsiniz, GitHub'da da bulunan açık kaynak kodlu bir araçtır.

//Üçüncü Öneri//

En iyi üçüncü çözüm Tam Sayfa Ekran Yakalama .

Bu üç araç, diğer tarayıcıların yanı sıra Google Chrome için en iyi puan alan ekran araçlarından birkaçıdır.

Umarım size yardımcı olur!

1
katma

I have had some luck in the past with XULRunner

You can try the routine outlined here: https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/

Temelde bir Firefox kabuğu çalıştırıyor ve ekran görüntüleri kapma işlemini otomatik hale getiriyor. Biraz tweaking gerekebilir, ancak gereksinimlerinizi yazılı olarak karşılayabileceğini düşünüyorum.

0
katma
Genel olarak, bu oldukça iyi! Sahip olduğum ihtiyaçlara hizmet ediyor. Bu konuda tek sorun bu çözümle firefox'a sıkışıp kalmam. Bununla birlikte, yukarıda söylediğim gibi: "Bir çapraz tarayıcı çözümü istiyorum ve tarayıcının olasılığına bağlı değilim.". Çünkü amacım, bazı tarayıcıların farklı renderlerini karşılaştırmak. Yine de teşekkür ederim :)
katma yazar Schnodderbalken, kaynak