વેબને કેપ્ચર અને કન્વર્ટ કરવા માટેનાં સાધનો

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

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

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

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

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

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

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

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

  • તમારી પાસે હાલમાં કોઈ અધિકૃત ડોમેન્સ ન હોવાથી આ જાવાસ્ક્રિપ્ટ API તમારા માટે કામ કરશે નહીં! મહેરબાની કરીને તમારું ડોમેન ઉમેરો!

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

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

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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 શબ્દકોશ તરીકે તેના મૂલ્ય સાથેના પરિમાણને ઉમેરીને પરિમાણ ઉમેરવામાં આવે છે.

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

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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ક્સએક્સ અને પીડીએફ દસ્તાવેજો બનાવી રહ્યા છીએ, આ પછી વપરાશકર્તાઓ બ્રાઉઝર પર આપમેળે ડાઉનલોડ થાય છે.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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@/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@/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 પરનું ફોર્મેટ સેટ કર્યું છે. જો તમને કોઈ અન્ય વધારાના વિકલ્પોની જરૂર ન હોય તો તમારે આ પરિમાણને બરાબર ઉલ્લેખિત કરવાની જરૂર નથી.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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ક્શન પછી સ્ક્રીનશોટ અથવા કેપ્ચરનો બેઝએક્સએન્યુએમએક્સ ડેટા યુઆરઆઇ પસાર કરવામાં આવશે, તે પછી તમારી જાવાસ્ક્રિપ્ટ એપ્લિકેશનને કેપ્ચર પર પણ વધુ નિયંત્રણની મંજૂરી આપવામાં આવે છે.

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/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@/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 પદ્ધતિઓ

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

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

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