[JavaScript] Kopiowanie z html2canvas Opcje

[edzio20]

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]

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]

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.

Ten post edytował aras785 27.04.2018, 09:12:51

[trueblue]

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]

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.

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]

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

[aras785]

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