أدوات لالتقاط وتحويل الويب

نمط لقطات الشاشة مع جافا سكريبتواجهة برمجة تطبيقات جافا سكريبت

يتيح JavaScript API لـ GrabzIt تصميم جميع عناصر HTML التي تم إنشاؤها باستخدام CSS.

صور الاسلوب

لقطات الصور يمكن أن يكون على غرار باستخدام displayid و displayclass المعلمات. تضيف هذه المعلمات ديناميكيًا idiv أو سمة class ، إلى كائن الصورة. أدناه أ CSS تم تعيين فئة لصورة قطة.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"displayclass": "MyClass"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"displayclass": "MyClass"}).Create();
</script>

يمكن بعد ذلك تحديد CSS لتصميم الصورة ، كما هو موضح أدناه.

<style>
.MyClass
{
    border:1px solid red;
}
</style>

فائدة إضافية لاستخدام هذه الخيارات تتيح لك أيضًا استخدام JavaScript لمعالجة صورة لقطة الشاشة. أسفل المعرف المحدد يتم تعيين لقطة شاشة الصورة التي تم إنشاؤها ومن ثم المحدد onfinish تسمى الوظيفة بمجرد تحميل لقطة الشاشة. تستخدم هذه الوظيفة بعد ذلك المعرف المحدد للحصول على صورة لقطة الشاشة وتعرض ارتفاعها.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"displayid": "myScreenshot", "onfinish": function (id){
        var div = document.getElementById('myScreenshot');
        alert(div.height);
    }}).Create();
</script>

رسائل خطأ النمط

رسائل خطأ يمكن نصب باستخدام errorid و errorclass المعلمات. هذه المعلمات بشكل حيوي إضافة معرف أو سمة فئة على التوالي إلى رسالة الخطأ <span> عنصر ، في حين إزالة بالإضافة إلى نمط الخطأ الافتراضي.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"errorclass": "MyErrorClass"}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"errorclass": "MyErrorClass"}).Create();
</script>

يمكن بعد ذلك تصميم رسالة الخطأ ، كما هو موضح أدناه.

<style>
.MyErrorClass
{
    font-weight:bold;
}
</style>

بالطبع إذا تم استخدام هذا في تركيبة مع onerror الحدث ثم يمكن أيضا معالجة رسالة الخطأ مع جافا سكريبت. أدناه أ errorid تم تحديده بحيث يمكن الرجوع إلى فترة رسالة الخطأ في onerror وظيفة. هذه الوظيفة ثم يغير رسالة الخطأ إذا تم إرجاع رمز خطأ معين.

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.3.7/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
    {"errorid": "myErrorMessage", "onerror": function (message, code){
        if (code == 500)
        {
            var span = document.getElementById('myErrorMessage');        
            if (span != null)
            {
                span.innerHTML = "Oops! We will get this sorted!";
            }
        }
    }}).Create();
</script>