જાવાસ્ક્રિપ્ટ સાથે વેબસાઇટ સ્ક્રીનશોટ લો

આ ડાયગ્નોસ્ટિક્સ પેનલ તમને તમારા કોડને ડિબગ કરવામાં મદદ કરી શકે છે!

GrabzIt જાવાસ્ક્રિપ્ટ API નો ઉપયોગ કરવો એ છબી, DOCX અથવા પીડીએફ સ્ક્રીનશોટ મૂકવાની સરળ રીત છે, તેમજ એનિમેટેડ GIF રૂપાંતર માટે વિડિઓ અને વધુ intઓ તમારી વેબસાઇટ ફક્ત જરૂર છે GrabzIt જાવાસ્ક્રિપ્ટ લાઇબ્રેરી, જાવાસ્ક્રિપ્ટ કોડની લાઇન અને કેટલાક GrabzIt જાદુ!

ડિફ defaultલ્ટ રૂપે એકવાર કેપ્ચર બનાવ્યા પછી તે તમારા પેકેજ દ્વારા નિર્ધારિત સમય માટે અમારા સર્વર્સ પર કેશ રહેશે. પછી જો તમારા સ્ક્રીનશshotટ ભથ્થાને બિનજરૂરી રીતે અટકાવવા માટે, જો અગાઉ કેશ્ડ સ્ક્રીનશ asટના સમાન પરિમાણોનો ઉપયોગ કરીને ગ્રેબઝિટના જાવાસ્ક્રિપ્ટ એપીઆઇ પર ક aલ કરવામાં આવે છે. આ વર્તનનો ઉપયોગ કરીને અક્ષમ કરી શકાય છે કેશ પરિમાણ.

શરૂ કરી રહ્યા છીએ

જાવાસ્ક્રિપ્ટ API સાથે પ્રારંભ કરવા માટે, આ પગલાંને અનુસરો:

તમારી મફત મેળવો એપ્લિકેશન કી.
મફત ડાઉનલોડ કરો જાવાસ્ક્રિપ્ટ લાઇબ્રેરી અને પ્રયાસ કરો ડેમો એપ્લિકેશન.
નીચેના વિહંગાવલોકનને વાંચીને ગ્રાબઝિટનું જાવાસ્ક્રિપ્ટ એપીઆઇ કેવી રીતે કાર્ય કરે છે તે વિશેની મૂળભૂત બાબતો શોધો.

અન્ય લોકોને ફક્ત તમારા જાવાસ્ક્રિપ્ટ કોડની કyingપિ કરવા અને તમારા બધા GrabzIt એકાઉન્ટ સંસાધનોની ચોરી અટકાવવા માટે, તમારે આવશ્યક કયા ડોમેન્સને અધિકૃત કરો તમારી એપ્લિકેશન કીનો ઉપયોગ કરી શકે છે.

સૌથી સરળ ઉદાહરણ

પ્રારંભ કરવા માટે GrabzIt જાવાસ્ક્રિપ્ટ લાઇબ્રેરી અને સમાવેશ થાય છે grabzit.min.js વેબ પૃષ્ઠમાં લાઇબ્રેરી તમે ઇચ્છો છો કે કેપ્ચર દેખાય અથવા તેના CDN સંસ્કરણનો સંદર્ભ શામેલ હોય grabzit.min.js નીચે બતાવ્યા પ્રમાણે પુસ્તકાલય. પછી તમારા વેબ પૃષ્ઠના બ tagડી ટેગમાં સ્ક્રીનશોટ ઉમેરવા માટે નીચેનો કોડ શામેલ કરો. તમારે આને બદલવાની જરૂર પડશે APPLICATION KEY તમારી સાથે એપ્લિકેશન કી અને બદલો https://www.tesla.com જે વેબસાઇટનો તમે સ્ક્રીનશોટ લેવા માંગો છો.

છબી માટે URL
HTML થી છબી

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

પછી થોડી વાર રાહ જુઓ અને વેબ પૃષ્ઠને ફરીથી લોડ કરવાની જરૂર વિના, છબી આપમેળે પૃષ્ઠની ટોચ પર દેખાશે. આ છબી બ્રાઉઝરમાં જનરેટ થયેલ હોવા છતાં પણ તમે તેનો ઉપયોગ કરી શકો છો આ તકનીકો માટે save તમારા પોતાના સર્વર પર મેળવે છે અગર તું ઈચ્છે.

જો તમે GrabzIt નો ઉપયોગ ES6 મોડ્યુલ તરીકે કરવા માંગો છો, તો તમે તેનો ઉપયોગ કરી શકો છો ટેકનિક, કેવી રીતે GrabzIt તમારા જાવાસ્ક્રિપ્ટમાં સમાવવામાં આવેલ છે તેના સિવાય તે અહીં વિગતવાર બરાબર તે જ રીતે કાર્ય કરશે.

તમારા સ્ક્રીનશોટને કસ્ટમાઇઝ કરી રહ્યાં છે

જ્યારે એપ્લિકેશન કી અને યુઆરએલ અથવા એચટીએમએલ પરિમાણો આવશ્યક છે, તો બધા પરિમાણો વૈકલ્પિક છે. તમને જરૂરી દરેક વૈકલ્પિક પરિમાણો માટે નીચેના બંધારણમાં JSON શબ્દકોશ તરીકે તેના મૂલ્ય સાથેના પરિમાણને ઉમેરીને પરિમાણ ઉમેરવામાં આવે છે.

દાખલા તરીકે જો તમે પી.એન.જી. ફોર્મેટમાં, 400px ની પહોળાઈ અને 400px ની heightંચાઈ સાથેનો સ્ક્રીનશોટ લેવા માંગતા હો અને સ્ક્રીનશોટ લેવામાં આવે તે પહેલાં 10 સેકંડ રાહ જોવી હોય તો તમે નીચે મુજબ કરો.

છબી માટે URL
HTML થી છબી

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay", 10000}).Create();
</script>

જાવાસ્ક્રિપ્ટ એપીઆઇની વેબ પૃષ્ઠના એચટીએમએલ પર સરળ accessક્સેસ હોવાથી તે કેપ્ચર કરવા માટે પણ આદર્શ છે ગતિશીલ વેબપેજ સામગ્રી અથવા સામગ્રી લ behindગિન પાછળ.

પીડીએફ અને વધુ બનાવવું

અન્ય પ્રકારની કેપ્ચર બનાવવા માટે, જેમ કે પીડીએફ, ડીઓસીએક્સ, સીએસવી, જેએસઓન અથવા એક્સેલ સ્પ્રેડશીટ ફક્ત ઇચ્છિત ફોર્મેટનો ઉલ્લેખ કરે છે અને તે આપમેળે બનાવવામાં આવશે. ઉદાહરણ તરીકે નીચે આપેલા ઉદાહરણોમાં આપણે યુઆરએલ અને એચટીએમએલથી અનુક્રમે ડ Dક્સએક્સ અને પીડીએફ દસ્તાવેજો બનાવી રહ્યા છીએ, આ પછી વપરાશકર્તાઓ બ્રાઉઝર પર આપમેળે ડાઉનલોડ થાય છે.

પીડીએફ માટે યુઆરએલ
HTML થી પીડીએફ
DOCX પર URL
HTML થી DOCX

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

તે યાદ રાખવું અગત્યનું છે પરિમાણ ડાઉનલોડ કરો કોઈ પણ પ્રકારનાં કેપ્ચર, જેમ કે DOCX, PDF, PNG, JPG અથવા CSV ને આપમેળે ડાઉનલોડ કરવા માટે વાપરી શકાય છે.

તત્વોમાં સ્ક્રીનશોટ ઉમેરવાનું

આ AddTo છબી અથવા પીડીએફ કેપ્ચરને ઉમેરવા માટે નીચેની પદ્ધતિ એ એચટીએમએલ દસ્તાવેજની અંદરના સ્થાન તરીકે તત્વ અથવા ડ aમ તત્વની ID સ્વીકારે છે. નીચેના ઉદાહરણમાં સ્ક્રીનશોટ આમાં ઉમેરવામાં આવશે insertCode ડિવ.

અંતે કોઈપણ જરૂરી પાસ કરો પરિમાણો માટે JSON શબ્દકોશ તરીકે ConvertURL or ConvertHTML પદ્ધતિઓ. નીચેના ઉદાહરણમાં વિલંબને 1000ms અને PNG પરનું ફોર્મેટ સેટ કર્યું છે. જો તમને કોઈ અન્ય વધારાના વિકલ્પોની જરૂર ન હોય તો તમારે આ પરિમાણને બરાબર ઉલ્લેખિત કરવાની જરૂર નથી.

છબી માટે URL
HTML થી છબી

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

કેપ્ચર્સને ડેટા યુઆરઆઈમાં રૂપાંતરિત કરવું

આ DataURI નીચેની પદ્ધતિ ક aલબbackક ફંક્શનને સ્વીકારે છે, આ ફ thenક્શન પછી સ્ક્રીનશોટ અથવા કેપ્ચરનો બેઝએક્સએન્યુએમએક્સ ડેટા યુઆરઆઇ પસાર કરવામાં આવશે, તે પછી તમારી જાવાસ્ક્રિપ્ટ એપ્લિકેશનને કેપ્ચર પર પણ વધુ નિયંત્રણની મંજૂરી આપવામાં આવે છે.

છબી માટે URL
HTML થી છબી

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt પદ્ધતિઓ

પ્રારંભ કરવા માટે, તમારે કન્વર્ટ કરવું છે તે સૂચવવા તમારે નીચેની ત્રણ પદ્ધતિઓમાંથી એક પસંદ કરવી આવશ્યક છે.

ConvertURL([url to capture], [options]) - ડિફ defaultલ્ટ રૂપે, એક JPG સ્ક્રીનશોટ, URL ને રૂપાંતરિત કરે છે. JSON શબ્દકોશ જેમાં સમાવે છે પરિમાણો વૈકલ્પિક છે.
ConvertHTML([html to convert], [options]) - એચટીએમએલ કન્વર્ટ, મૂળભૂત રીતે intઓએ જેપીજી છબી. JSON શબ્દકોશ જેમાં સમાવે છે પરિમાણો વૈકલ્પિક છે.
ConvertPage([options]) - વપરાશકર્તાનું વર્તમાન પૃષ્ઠ મેળવે છે, મૂળભૂત રીતે intઓએ જેપીજી છબી. JSON શબ્દકોશ જેમાં સમાવે છે પરિમાણો વૈકલ્પિક છે.

પછી તમે કેપ્ચર કેવી રીતે બનાવવું છે તે સ્પષ્ટ કરવા માટે આમાંથી એક અથવા વધુ પદ્ધતિઓ પસંદ કરો.

UseSSL() - બળજબરીથી કરો SSL નો ઉપયોગ કરીને વિનંતીઓ.
Encrypt() - ક્રિપ્ટોગ્રાફિકલી સલામત કીથી આપમેળે ક captureપ્ચરને એન્ક્રિપ્ટ કરો.
AddPostVariable(name, value) - એચટીટીપી પોસ્ટ પરિમાણ અને વૈકલ્પિક મૂલ્યને વ્યાખ્યાયિત કરે છે, આ પદ્ધતિને અનેક પરિમાણો ઉમેરવા માટે ઘણી વખત કહી શકાય. આ પદ્ધતિનો ઉપયોગ કરવાથી ગ્રાબઝિટ તેને દબાણ કરશે એક HTTP પોસ્ટ કરો.
AddTemplateVariable(name, value) - વ્યાખ્યાયિત કરે છે એ વૈવિધ્યપૂર્ણ નમૂના પરિમાણ અને મૂલ્ય, આ પદ્ધતિને અનેક પરિમાણો ઉમેરવા માટે ઘણી વખત કહી શકાય.
AddTo([element | element id]) - કેપ્ચર દાખલ કરે છે into ઉલ્લેખિત તત્વ.
Create() - કેપ્ચર દાખલ કરે છે intઓ બોડી ટ tagગની શરૂઆત, અથવા જો તે HTML દસ્તાવેજનો રુટ નોડ હાજર નથી.
CreateInvisible() - કેપ્ચર બનાવવામાં આવ્યું છે પરંતુ વેબ પૃષ્ઠ પર બતાવેલ નથી.
DataURI([callback function], [decrypt]) - ક callલબbackક ફંક્શનના સિંગલ પેરામીટરમાં કેપ્ચરનો બેઝએક્સએન્યુએમએક્સ ડેટા યુઆરઆઇ આપે છે. જો ડિક્રિપ્ટ પરિમાણ સાચું છે તો તે કોઈપણ એન્ક્રિપ્ટેડ કેપ્ચર્સને આપમેળે ડીક્રિપ્ટ કરશે.

આ જાવાસ્ક્રિપ્ટ કોડ લાઇબ્રેરી સંપૂર્ણપણે ખુલ્લા સ્રોત છે! જો તમે સ્રોત કોડ જોવા અથવા સુધારવા માંગતા હો, તો તમે તેને શોધી શકો છો GitHub.