JavaScript ile bir web sayfasının ekran görüntüsünü almak ister misiniz?

JavaScript ile bir web sayfasının ekran görüntüsünü alıp sunucuya geri göndermek mümkün müdür?

Tarayıcı güvenliği sorunlarıyla pek ilgilenmiyorum. uygulama HTA için olduğu gibi . Ama mümkün mü?

ActiveX denetimi kullanarak bir HTA için bunu yaptım. Ekran görüntüsünü almak için VB6'da kontrolü oluşturmak oldukça kolaydı. SendKeys PrintScreen yapamaz çünkü keybd_event API çağrısı kullanmak zorunda kaldı. İşte bunun kodu:

Declare Sub keybd_event Lib "user32" _
(ByVal bVk As Byte, ByVal bScan As Byte, ByVal dwFlags As Long, ByVal dwExtraInfo As Long)

Public Const CaptWindow = 2

Public Sub ScreenGrab()
   keybd_event &H12, 0, 0, 0
   keybd_event &H2C, CaptWindow, 0, 0
   keybd_event &H2C, CaptWindow, &H2, 0
   keybd_event &H12, 0, &H2, 0
End Sub

Bu sadece pencereyi panoya almak kadar uzağa götürür.

Başka bir seçenek, ekran görüntüsünü istediğiniz bir HTA ise, DOM düğümlerini sunucuya göndermek için bir XMLHTTPRequest kullanmak ve ardından sunucu tarafında ekran görüntüleri oluşturmak olacaktır.

Google bunu Google + 'da yapıyor ve yetenekli bir geliştirici bunu tersine değiştirdi ve http://html2canvas.hertzen.com/ üretti . IE'de çalışmak için http://excanvas.sourceforge.net/ gibi bir tuval destek kütüphanesine ihtiyacınız olacak.

Keşfettiğim bir diğer olası çözüm, http://www.phantomjs.org/ olup, sayfaların ekran görüntülerini ve çok daha fazlasını kolayca almanızı sağlar. Bu soruya ilişkin orijinal gereksinimlerim artık geçerli değilken (farklı iş), PhantomJS'yi gelecekteki projelere entegre edeceğim.

Pounder, tüm vücut elemanlarını bir canvase'ye ayarlayıp ardından canvas2image kullanarak yapmak mümkün mü?

http://www.nihilogic.dk/labs/canvas2image/

Bunu yapmanın olası bir yolu, pencerelerde çalışıyorsa ve .NET yüklüyse şunları yapabilirsiniz:

public Bitmap GenerateScreenshot(string url)
{
    // This method gets a screenshot of the webpage
    // rendered at its full size (height and width)
    return GenerateScreenshot(url, -1, -1);
}

public Bitmap GenerateScreenshot(string url, int width, int height)
{
    // Load the webpage into a WebBrowser control
    WebBrowser wb = new WebBrowser();
    wb.ScrollBarsEnabled = false;
    wb.ScriptErrorsSuppressed = true;
    wb.Navigate(url);
    while (wb.ReadyState != WebBrowserReadyState.Complete) { Application.DoEvents(); }


    // Set the size of the WebBrowser control
    wb.Width = width;
    wb.Height = height;

    if (width == -1)
    {
        // Take Screenshot of the web pages full width
        wb.Width = wb.Document.Body.ScrollRectangle.Width;
    }

    if (height == -1)
    {
        // Take Screenshot of the web pages full height
        wb.Height = wb.Document.Body.ScrollRectangle.Height;
    }

    // Get a Bitmap representation of the webpage as it's rendered in the WebBrowser control
    Bitmap bitmap = new Bitmap(wb.Width, wb.Height);
    wb.DrawToBitmap(bitmap, new Rectangle(0, 0, wb.Width, wb.Height));
    wb.Dispose();

    return bitmap;
}

Ve sonra PHP ile şunları yapabilirsiniz:

exec("CreateScreenShot.exe -url http://.... -save C:/shots domain_page.png");

Sonra sunucu tarafında ekran görüntüsü var.

Bu sizin için ideal bir çözüm olmayabilir, ancak yine de bahsetmeye değer olabilir.

Snapsie , Internet Explorer ekran görüntülerinin alınmasını ve kaydedilmesini sağlayan açık kaynaklı bir ActiveX nesnesidir. DLL dosyası istemciye kaydedildikten sonra, ekran görüntüsünü yakalayabilmeli ve dosyayı JavaScript ile sunucuya yükleyebilmelisiniz. Dezavantajları: DLL dosyasını istemciye kaydettirmesi gerekir ve yalnızca Internet Explorer ile çalışır.

Hataları bildirmek için de benzer bir gereksinimimiz vardı. Bir intranet senaryosu olduğundan, tarayıcı eklentilerini ( Firefox için Fireshot ve Internet Explorer için IE Ekran Görüntüsü gibi ) kullanabildik.

SnapEngage bir kullanan Java uygulaması bir tarayıcı ekran görüntüsü yapmak için (1.5+). AFAIK, java.awt.Robotişi yapmalıdır - kullanıcı sadece uygulamanın bir kez (bir kez) izin vermesine izin vermelidir.

Ve bu konuda bir yazı buldum:

• Yığın Taşması sorusu ActiveX kullanmadan bir web sitesinin ekran görüntüsünü almak için JavaScript kodu
• Blog yazısı SnapABug nasıl çalışır - ve ne yapmaları gerekir

HTA ve VBScript kullanarak bunu başarabilirsiniz . Ekran görüntüsünü yapmak için harici bir aracı aramanız yeterlidir. Adın ne olduğunu unuttum, ancak Windows Vista'da ekran görüntüleri yapmak için bir araç var. Bunun için fazladan bir kurulum yapmanız bile gerekmez.

Otomatik olarak gelince - tamamen kullandığınız araca bağlıdır. Bir API varsa, kullanıcı ne yaptığınızı bilmeden birkaç Visual Basic çağrı yoluyla ekran görüntüsü ve kaydetme işlemi tetikleyebilirsiniz eminim.

HTA'dan bahsettiğinizden beri, Windows'ta olduğunuzu ve (muhtemelen) ortamınızı (örneğin işletim sistemi ve sürüm) çok iyi bildiğinizi varsayıyorum.

Dom-görüntü iyi bir iş yaptı buldum (html2canvas çok daha iyi). Aşağıdaki soru ve cevaba bakın: https://stackoverflow.com/a/32776834/207981

Bu soru, bunu sunucuya geri göndermeyi soruyor, bu mümkün olmalı, ancak resimleri indirmek istiyorsanız, FileSaver.js ile birleştirmek ve bir zip indirmek istiyorsanız birden fazla görüntü dosyaları oluşturulan tüm istemci tarafı jszip bir göz atın .

Javascript'te ekran görüntüsü almak için harika bir çözüm https://grabz.it .

Her tür JS uygulaması tarafından kullanılabilen esnek ve kullanımı kolay bir ekran görüntüsü API'sına sahiptirler.

Denemek istiyorsanız, ilk önce yetkilendirme uygulaması anahtarı + sırrını ve ücretsiz SDK'yı almalısınız

Ardından, uygulamanızda uygulama adımları şöyle olur:

// include the grabzit.min.js library in the web page you want the capture to appear
<script src="grabzit.min.js"></script>

//use the key and the secret to login, capture the url
<script>
GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com").Create();
</script>

Ekran görüntüsü farklı parametrelerle özelleştirilebilir . Örneğin:

GrabzIt("KEY", "SECRET").ConvertURL("http://www.google.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

Bu kadar. Ardından kısa bir süre bekleyin ve görüntü, sayfayı yeniden yüklemenize gerek kalmadan otomatik olarak sayfanın altında görünecektir.

Ekran görüntüsü mekanizmasının burada keşfedebileceğiniz başka işlevleri de vardır .

Ekran görüntüsünü yerel olarak kaydetmek de mümkündür. Bunun için GrabzIt sunucu tarafı API'sını kullanmanız gerekecektir. Daha fazla bilgi için ayrıntılı rehber kontrol buraya .

Sunucu tarafında yapmaya istekliyseniz , artık kullanımdan kaldırılan PhantomJS gibi seçenekler var . Gitmenin en iyi yolu Node.JS'de Puppeteer gibi bir şey içeren Headless Chrome olurdu. Kuklacı'yı kullanarak bir web sayfasını yakalamak aşağıdaki gibi basit olacaktır:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Bununla birlikte, bazı bağımlılıkları olan ve kısıtlı ortamlarda uygun olmayabilecek sunucularınızda çalışabilmek için başsız krom gerekir. (Ayrıca, Node.JS kullanmıyorsanız, tarayıcıları yükleme / başlatma işlemlerini kendiniz gerçekleştirmeniz gerekebilir.)

Bir SaaS hizmeti kullanmak istiyorsanız, aşağıdakiler gibi birçok seçenek vardır:

• Restpack
• UrlBox
• Ekran Görüntüsü Katmanı

Bu soru eski ama belki de son teknoloji bir cevapla ilgilenen biri var:

Şunları kullanabilirsiniz getDisplayMedia:

https://github.com/ondras/browsershot

Bugün itibarıyla Nisan 2020 GitHub kütüphanesi html2Canvas https://github.com/niklasvh/html2canvas

GitHub 20K yıldız | Azure boru hatları: Başarılı | İndirmeler 1.3M / ay |

quote: " JavaScript HTML oluşturucu Komut dosyası , web sayfalarının veya bölümlerinin" ekran görüntülerini "doğrudan kullanıcıların tarayıcısında almanıza olanak tanır . gerçek bir ekran görüntüsü oluşturmaz, ancak ekran görüntüsünü sayfadaki bilgilere göre oluşturur.

Bir svg ve / veya sayfa içerikli bir görüntü oluşturmak için rasterizeHTML kullanan basit bir işlev yaptım.

Bunu kontrol et :

https://github.com/orisha/tdg-screen-shooter-pure-js