Forum PHP.pl > [JavaScript] Kopiowanie z html2canvas

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Kopiowanie z html2canvas

edzio20

27.04.2018, 07:03:07

Witam,
potrzebuję robić screenshoty niektórych elementów na stronie i w tym celu używam 'html2canvas' i wszystko działa, ale problem mam taki, że potrzebuje dany obraz skopiować do schowka (clipboard) i nie za bardzo wiem jak to zrobić, jakieś pomysły?

Kod robienia obrazu oraz wstawianie go na stronę:

Kod

html2canvas(document.getElementsByClassName('table')[0]).then(function(canvas) {
document.body.appendChild(canvas);
});

trueblue

27.04.2018, 08:57:29

Pobierasz dane obrazka z Canvas (toDataURL), tworzysz <img> na stronie ustawiając mu jako src wynik z poprzedniego kroku, wykorzystujesz jakiś skrypt JS do skopiowania zaznaczonego obszaru do schowka.

aras785

27.04.2018, 09:03:56

Obrazka nie jesteś w stanie skopiować niestety (jedynie tekst):

http://jsfiddle.net/sodofkcs/3585/

@trueblue - możliwe, że się myle, zapodaj przykład jeśli da się skopiować obrazek przy użyciu js.

trueblue

27.04.2018, 10:11:09

aras785,
bardzo możliwe, że masz rację. Co prawda jest Clipboard API, ale chyba ze wsparciem tylko w Chrome.

Autorowi pozostaje rozwiązanie pośrednie - wymusić download obrazka.

edzio20

27.04.2018, 10:15:12

Cytat(trueblue @ 27.04.2018, 09:57:29 )

Zrobiłem jak piszesz, ale tak jak napisał aras785, kopiowanie działa chyba tylko na tekst, bo obrazka nie za bardzo chce mi skopiować.

Kod

html2canvas(document.getElementsByClassName('table')[0]).then(function(canvas) {
    _img = document.createElement("img");
    _img.src = canvas.toDataURL();
    _o = document.body.appendChild(_img);
    _o.select();
    document.execCommand("Copy");
});

trueblue

27.04.2018, 10:20:48

Nawet gdyby działało, to źle to zrobiłeś. Trzeba stworzyć obszar, dodać do niego węzły i wtedy zaznaczyć.

aras785

27.04.2018, 10:43:39

http://owaisafaq.com/blog/demos/copier/ (u mnie nie działa

)

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.