Að handtaka DOM Elements 'skjámyndir: Server Side VS. Aðferðir viðskiptavinarins

Fyrir nokkrum vikum skrifaði ég um Chatilyzer - nýtt hliðarverkefni sem ég hef unnið að undanfarinn mánuð.

Skjótt yfirlit um forritið og flæði appsins: Chatilyzer gerir þér kleift að fá tölfræði um WhatsApp spjall. Til þess að appið virki þarftu að hlaða út * * txt skrá af WhatsApp spjalli. Chatilyzer er að flokka og greina textann og draga út áhugaverð gögn úr honum. Síðan er þér vísað á niðurstöðusíðu þar sem þú sérð fallega mynd af virkni spjallsins þíns.

Dæmi um niðurstöðusíðu Chatilyzer

Eitt af þeim áskorunum sem ég átti við að þróa þetta vefforrit var að leyfa notendum að búa til skjámynd af niðurstöðusíðunni og hlaða því niður svo þeir gætu deilt því í sínum hópi - frekar en að deila url á síðuna.

Aðferð netþjónsins (NodeJS)

Ég byrjaði með hliðaraðferðina á netþjóninum og notaði PhantomJS og NPM mát sem hét “Node Webshot”. Það er með mjög einfalt api sem gerir þér kleift að búa til skjámyndir frá tiltekinni url:

flytja inn vefsíðu frá 'vefmynd';

vefmynd ('https://chatilyzer.com', 'chat.png', fall (err) {
  // skjámynd núna vistuð í chat.png
});

Eftir að ég hafði búið til skjámyndina þurfti ég að hlaða því upp í skýgeymslu og senda url vefmyndarinnar aftur til viðskiptavinarins svo ég gæti leyft notandanum að hlaða niður myndinni.

Kostir:

  • A tilbúin til notkunar einingar.
  • Skjámynd er vistuð í skýinu svo hún er tiltæk hvenær sem er.
  • Sveigjanlegur api sem gerir þér kleift að stilla viðeigandi breidd og hæð skjámyndarinnar.

Gallar:

  • Allt eða ekkert - skjámyndin tekur alla síðu og þú getur ekki stjórnað tilteknum þætti sem þú vilt taka.
  • Útgáfa - Ef þú þarft að bíða eftir að async JS hleðst áður en þú tekur skjámyndina gætirðu lent í vandræðum.
  • Umhverfi - Í ljósi þess að þú ert ekki í raunverulegu vafraumhverfi tekur PhantomJS ekki við sérsniðnum / Google leturgerðum sem réttum, sem leiðir til þess að sjálfgefið leturgerð er birt á skjámyndinni.
  • Geymsla - Eftir að búið er að búa til skjámyndina verður þú að vista það í skýgeymslu til að skila giltri vefslóð myndar til notandans. Sem þýðir að þú þarft skýjageymslu sem hugsanlega gæti kostað þig meiri peninga.
  • Öryggi - Ef gögn skjámyndarinnar eru viðkvæm er það ekki góð aðferð að vista eintak í skýinu.

EDIT: Eftir að hafa fengið nokkur viðbrögð frá samfélaginu kemur í ljós að það er önnur lausn á netþjóninum með NPM mát sem kallast „Puppeteer“ sem keyrir ofan á höfuðlaust Chrome. Svona á að búa til skjámynd með Puppeteer:

const puppeteer = þurfa ('puppeteer');

(ósamstilltur () => {
  const browser = bíða eftir puppeteer.launch ();
  const page = bíða vafra.newPage ();
  bíða síðu.goto ('https://chatilyzer.com');
  bíddu síðu.screenshot ({path: 'chatilyzer.png'});

  bíða vafra. loka ();
}) ();

Þessi eining myndi leysa allt eða ekkert, flutning og umhverfismál, þar sem hún veitir sömu flutningsvél og Chrome.

Aðferð viðskiptavinarins

Mér fannst niðurstaða netþjónustunnar ekki nægilega góð fyrir notkunarmálin mín svo ég byrjaði að kanna aðra möguleika.

Ég fann ákaflega flott JS bókasafn sem kallast “html2canvas”, og eins og nafnið gefur til kynna, mun breyta HTML frumefni í strigaþátt.

vefsíða html2canvas

Eins og þú sérð er það líka mjög auðvelt í notkun. Í grundvallaratriðum ertu að kalla html2canvas aðferðina og skila DOM frumefni sem rök. Þessi aðferð skilar loforði um að þú getir notað til að vinna úr strigaþætti.

html2canvas (document.querySelector ("# capture")). þá (canvasElm => {
    document.body.appendChild (strigaElm);
});

Næst viltu gera notandanum kleift að hlaða niður skjámyndinni.

Leiðin til að gera það er með því að nota JS toDataURL aðferðina eins og þú sérð hér að neðan:

// Fáðu base64 gagnstreng
var imageType = 'image / png';
var imageData = canvasElm.toDataURL (imageType);
// Opnaðu gagnastrenginn í núverandi glugga
document.location.href = imageData.replace (imageType, 'image / octet-stream');

Það er annað JS bókasafn sem kallast „canvas2image“. Ég mæli með að nota það frekar að skrifa það sjálfur þar sem það veitir meiri sveigjanleika og gerir þér einnig kleift að búa til myndamerki úr strigaþættinum. Svo þú gætir fengið sömu niðurstöður með því að nota:

Canvas2Image.saveAsPNG (strigaElm, breidd, hæð);

Kostir:

  • WYSIWYG - Niðurstaðan er 1: 1 af því sem þú sérð á skjánum.
  • Engin miðlara megin - Allt keyrt í vafranum.
  • Öryggi - Ef gögn skjámyndarinnar eru viðkvæm skaltu taka þau á hlið viðskiptavinarins með miklu öruggari þar sem þjónninn er ekki meðvitaður um niðurstöðurnar og vistar ekki afrit annars staðar.

Gallar:

  • Samhæfni - ekki er stutt í html2canvas í öllum vöfrum
  • Dýrt - Þó svo að html2canvas skili loforði er það samt dýr aðgerð og fyrir stóra og flókna íhluti gæti það tekið nokkrar sekúndur áður en niðurstöður nást.
  • Þröng sýn - Ef þú ert að nota þröngan skjá (til dæmis fyrir farsíma) verður skjámyndin þröngt og það er að taka skjámyndina frá raunverulegu yfirliti (það gæti verið leyst með því að fara annaðhvort með lagfæringarbreidd sem rök fyrir canvas2html , eða með því að opna iframe með viðeigandi breidd í bakgrunni, taktu skjámyndina þar og sendu myndgögnin aftur með postMessage).
  • Stuðningur við þætti - Ekki eru allir HTML þættir studdir í html2canvas. Til dæmis verða aðrir strigaþættir, iframes og flash, alls ekki gefnir upp.

Í niðurstöðu

Það eru tvær leiðir til að fanga skjámynd úr HTML frumefnum og þú ættir að hugsa hvað hentar forritinu þínu.

Aðferð miðlarans er sú sem þú velur þegar þú þarft reynslu af vafra / vettvangi og ekki viss um að notendur þínir hafi réttan vafra til að fanga skjámyndina. Verðið sem þú þarft að greiða er bæði í líkamlegri greiðslu fyrir skýgeymsluþjónustuna og ónákvæmar niðurstöður.

Aðkoma viðskiptavinarins er góð þegar þú ert viss um að notendur þínir munu hafa vafra sem er fær um að fanga skjámyndina (eða þú ert tilbúinn að greiða verð fyrir þá sem ekki eru) og þegar nákvæmni er nauðsyn fyrir skjámyndina.

Fljótleg hugsun - Ætli besta aðferðin verði að sameina sín á milli. Þú gætir athugað hvort vafra notandans hafi stuðninginn sem þú þarft til að taka skjámynd, og ef ekki, þá skaltu afturkalla nálgun netþjónsins.

Vona að þú hafir haft gaman af greininni. Klappaðu því að þér líkaði það :)

Veistu um aðrar leiðir til að búa til skjámyndir af vefsíðum með NodeJS? Deildu í athugasemdum!