SORU
6 ŞUBAT 2011, Pazar


HTML5/Canvas kullanarak ekran görüntüleri almak için JavaScript

Google "Hata Raporu" ya da "geri bildirim Aracı" tarayıcı penceresinin bir alana bir hata ile ilgili görüşlerinizi gönderilen bir ekran görüntüsü oluşturmak için seçmenizi sağlar.

Google Feedback Tool Screenshot Jason Küçük, duplicate question a Gönderen ekran görüntüsü.

Bunu nasıl yapıyorlar? Google'ın JavaScript geri bildirim API here yüklenir ve their overview of the feedback module ekran özelliği gösteren.

CEVAP
13 Temmuz 2011, ÇARŞAMBA


JavaScript DOM okumak canvas kullanarak oldukça doğru bir temsilini oluşturabilirsiniz. Tuval resim içine html dönüştüren bir senaryo üzerinde çalışıyorum. Bugün gönderme içine bir uygulama yapmaya karar verdim tarif ettiğin gibi geri bildirimler.

Komut dosyası bir ekran görüntüsü, istemcilerin tarayıcı oluşturulmuş, bu form ile birlikte dahil olan geri bildirim formları oluşturmanızı sağlar. Ekran görüntüsü alarak DOM gibi olmayabilir 0 doğru, gerçek temsili olarak değil, bir gerçek ekran görüntüsü, ama oluşturur ekran görüntüsü bilgilere göre mevcut sayfa.

sunucudan herhangi bir işleme gerektirmezbir bütün olarak görüntü tarayıcı istemcilerinin. oluşturulur Bu HTML2Canvas script kendisi hala bir çok deneysel bir devlet olarak değil, ayrıştırmak neredeyse kadar olan CSS3 nitelikler isterdim, ne var herhangi bir destek yükü KÖŞELERİ görüntüleri bile bir proxy mevcut değildi.

Sınırlı tarayıcı uyumluluğu (daha fazlası olamazdı çünkü, sadece daha fazla çapraz yapmak için zaman tarayıcı desteklenen olmadı değil) hala oldukça.

Daha fazla bilgi için buradaki örnekler bir göz atalım:

http://hertzen.com/experiments/jsfeedback/

edit Html2canvas şimdi komut here examples here bazı ayrı olarak kullanılabilir.

2 düzenleyin Başka bir onay Google kullanan bir çok benzer yöntem, (aslında temel belgeleri tek büyük fark, onların zaman uyumsuz yöntemin geçme/çizim) bulunabilir Bu sunum ile Elliott Sprehn gelen Google geri bildirim takım: http://www.elliottsprehn.com/preso/fluentconf/

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 3DS Max Tutorials

    3DS Max Tuto

    4 AĞUSTOS 2013
  • alexis gillis

    alexis gilli

    23 HAZİRAN 2011
  • Ama Jenna

    Ama Jenna

    29 NİSAN 2011