Brauzer ekranlarında ekran almaq üçün HTML5 / Canvas / JavaScript istifadə edin

Google "Səhv Hesabat" və ya "Əlaqə Aracı", səhv geribildirimlə göndərilən ekran görüntüsünü yaratmaq üçün brauzerinizin pəncərəsinin sahəsini seçməyə imkan verir.

2019

830
06 февр. 06 fevral tarixində joelvh tərəfindən təyin olundu 2011-02-06 09:58 '11 at 9:58 2011-02-06 09:58
@ 3 cavab

JavaScript bu DOM'u oxuya bilər və bu istifadə edərək, kifayət qədər dəqiq bir nümayişi keçirir. HTML-ni bir kətan şəklində çevirən bir skript üzərində çalışdım. Təsəvvür etdiyiniz kimi bu gün geribildirim göndərmək üçün qərar verdim.

Skript, forma ilə yanaşı müştərinin brauzerində yaradılan ekran görüntüsünü də əhatə edən rəy formaları yaratmağa imkan verir. Ekranın çəkilişləri DOM-a əsaslanır və beləliklə, faktiki təqdimata 100% doğru olmaya bilər, çünki bu, əsl ekranın çəkilişini yaratmır, lakin səhifədə mövcud olan məlumatlara əsaslanaraq bir ekran səsi yaradır.

Bütün görünüş müştəri brauzerində yaradıldığı üçün serverdən göstərilməsini tələb etmir . HTML2Canvas scripti özü hələ çox təcrübəli bir vəziyyətdədir, çünki o deməkdir ki, demək olar ki, bir çox proksi server mövcud olsa belə CORS şəkillərinin yüklənməsini istəmirəm və demək olar ki, çox CSS3 xüsusiyyətlərini təhlil etmir.

Brauzer hələ də kifayət qədər məhdud brauzerinizin uyğunluğu (artıq dəstəklənə bilməyəcəyi üçün deyil, daha çox cross-browser etmək üçün vaxt yox idi).

Daha ətraflı məlumat üçün buraya baxın:

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

redaktə The html2canvas script indi buradaburada bəzi nümunələrdən istifadə edilə bilər.

Google redaktə qrupuna Elliott Spren tərəfindən bu təqdimatda Google tərəfindən çox oxşar bir metodu (əslində sənədlərə əsasən, yalnız əhəmiyyətli fərq onların asinxron həlli / rəsm metodudur) istifadə edərək təsdiqlədiyini təsdiq edən digər bir təsdiqdir: http: // www.elliottsprehn.com/preso/fluentconf/

1044
13 июля '11 в 14:29 2011-07-13 14:29 Cavab Niklas tərəfindən 13 iyul 2011-ci ildə saat 14: 29-da verilib 2011-07-13 14:29

İndi veb tətbiqi getUserMedia() istifadə edərək bütün müştəri masaüstü üçün "xüsusi" ekran görüntüsünü istifadə edə bilər:

Bu nümunəyə nəzər salın:

border=0

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Müştərinin xromu (indi üçün) istifadə etməsi lazımdır və chrome: // flags altında ekran tutmağı dəstəkləmək məcburiyyətində qalacaq.

58
29 окт. Matt Sinclair tərəfindən verilən cavab 2013-10-29 12:33 '13 at 12:33 2013-10-29 12:33

Niklas qeyd etdiyimiz kimi , html2canvas kitabxanasından js brauzerindən istifadə edərək ekran görüntüsü almaq üçün istifadə edə bilərsiniz. Bu kitabxanadan istifadə edərək, ekran görüntüsünü yaratmaq üçün bir nümunə təmin edərək, bu bənddə cavabını inkişaf etdirəcəyəm (sualın bu çərçivəsində):

 .container { margin-top: 10px; border: solid 1px black; } 
Bu misalda makeScreenshot() versiyası hazırlanmışdır: yaxşı makeScreenshot() . 

ƏLAVƏ OLUNUB

Bir ekran görüntüsü almanıza , bir bölgəni seçməyə, səhv təsvir etməyə və POST sorğu göndərməyə imkan verən sadə nümunə ( burada jsfiddle ) (əsas funksiya report() ).

 .bug-container { background: rgb(255,0,0,0.1); margin-top:20px; text-align: center; } .send { border-radius:5px; padding:10px; background: green; cursor: pointer; } .region { position: absolute; background: rgba(255,0,0,0.4); } .example { height: 100px; background: yellow; } .bug { margin-top: 10px; cursor: crosshair; } .hide { display: none; } 
19
01 июля '18 в 22:25 2018-07-01 22:25 Cavab Kamil Kiełczewski tərəfindən 01.07.2008 tarixində 22:25 2018-07-01 22:25 tarixində verilir

tags ilə bağlı digər suallar və ya bir sual