Khaitan

Khaitan

1549002550

How to change the caret when i click the button?

Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.

1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .

2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar

$(document).ready(function () {
                $('.fa-caret-down').on('click', function () {
                    if ($(this).hasClass('fa-caret-down')) {
                        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
                    }
                });
            });
  /* Type 3 */
  .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none
  }

.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}

.bg-dark-type-three {
background-color: #29a4d0 !important;
}

/* Default image size */
img {

      max-width: 40px;
      min-height: 40px;
  }

  /* images space */
  .col-md-2 {
      margin-left: 2%;
  }

<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=“sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=“anonymous”>
<div >
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

<nav class=“navbar navbar-expand-lg navbar-dark bg-dark-type-three”>
<button class=“navbar-toggler” type=“button” data-toggle=“collapse” data-target=“#navbarNavDropdown” aria-controls=“navbarNavDropdown” aria-expanded=“false” aria-label=“Toggle navigation”>
<span class=“navbar-toggler-icon”></span>
</button>
<div class=“collapse navbar-collapse” id=“navbarNavDropdown”>
<ul class=“navbar-nav”>
<li class=“nav-item dropdown nav-org”>

      &lt;a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        LAPTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; lg &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; sony &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; acer&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; dell&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&amp;q=90&amp;m=6&amp;h=623&amp;w=767&amp;b=%23FFFFFFFF&amp;l=f&amp;f=jpg&amp;o=t&amp;aim=true"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; HP &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        SPEAKERS &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Mono  &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;jass &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&amp;wid=1250"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;iBall &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Zebronics &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;Senizer &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;

        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOBILES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 7&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center "&gt;
                &lt;div&gt;
                  &lt;img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                    alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;samsung &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; Motorola &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt; iphone 6s&lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-2"&gt;
            &lt;a class="dropdown-item dropdown-hover-three-effect" href="#"&gt;
              &lt;div class="text-center"&gt;
                &lt;div&gt;
                  &lt;img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt=""&gt;
                &lt;/div&gt;
                &lt;h6&gt;redmi &lt;/h6&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        CAMARA &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        DESKTOP &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        REFURBISHED &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        ACCESSORIES &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;

      &lt;div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="nav-item dropdown"&gt;
      &lt;a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"&gt;
        MOTHERBOARD &lt;i class="caret-icon fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink"&gt;
        &lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;
        &lt;a class="dropdown-item" href="#"&gt;Something else here&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;

</nav>
</div>

<script src=“https://code.jquery.com/jquery-3.2.1.slim.min.js” integrity=“sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=“anonymous”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” integrity=“sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=“anonymous”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” integrity=“sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=“anonymous”></script>


the caret was not changed.

#javascript #jquery #html #css #html5

What is GEEK

Buddha Community

Alfie Mellor

1549013112

You were close. You have to point to the proper class, and then find the caret-icon elements to switch the caret.

$(document).ready(function () {
                $('.nav-link-type-three').on('click', function () {
                    if ($(this).find('.caret-icon').hasClass('fa-caret-down')) {
                        $(this).find('.caret-icon').removeClass('fa-caret-down').addClass('fa-caret-up');
                    } else {
                        $(this).find('.caret-icon').removeClass('fa-caret-up').addClass('fa-caret-down');
                    }
                });
            });
  /* Type 3 */
  .nav-link-type-three {
      padding-right: 2.5rem !important;
      padding-left: 1.5rem !important;
      color: white !important;
      text-decoration: none
  }

  .navbar-dark .navbar-nav .show>.nav-link-type-three {
      color: #232323 !important;
      text-decoration: none
  }

  .bg-dark-type-three {
      background-color: #29a4d0 !important;
  }
  
  /* Default image size */
      img {

          max-width: 40px;
          min-height: 40px;
      }

      /* images space */
      .col-md-2 {
          margin-left: 2%;
      }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown nav-org">

          <a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            LAPTOP <i class="caret-icon fa fa-caret-down"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
                    </div>
                    <h6> lg </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
                        alt="">
                    </div>
                    <h6> sony </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
                        alt="">
                    </div>
                    <h6> acer</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
                    </div>
                    <h6> dell</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
                        alt="">
                    </div>
                    <h6> HP </h6>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            SPEAKERS <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
                        alt="">
                    </div>
                    <h6>Mono  </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
                    </div>
                    <h6>jass </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
                        alt="">
                    </div>
                    <h6>iBall </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
                        alt="">
                    </div>
                    <h6>Zebronics </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
                    </div>
                    <h6>Senizer </h6>
                  </div>
                </a>
              </div>

            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            MOBILES <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
            <div class="row">
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
                    </div>
                    <h6> iphone 7</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center ">
                    <div>
                      <img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
                        alt="">
                    </div>
                    <h6>samsung </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
                    </div>
                    <h6> Motorola </h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
                    </div>
                    <h6> iphone 6s</h6>
                  </div>
                </a>
              </div>
              <div class="col-md-2">
                <a class="dropdown-item dropdown-hover-three-effect" href="#">
                  <div class="text-center">
                    <div>
                      <img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
                    </div>
                    <h6>redmi </h6>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            CAMARA <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            DESKTOP <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            REFURBISHED <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            ACCESSORIES <i class="caret-icon fa fa-caret-down"></i>
          </a>

          <div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            MOTHERBOARD <i class="caret-icon fa fa-caret-down"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Hollie  Ratke

Hollie Ratke

1597251600

How to Change Button Text Using JQuery | Button Click Show & Hide Div JQuery

Keywords:
jquery show hide div on click toggle
how to change button text in jquery
hide and show div using jquery
onclick show hide div jquery demo
jquery show/hide multiple div onclick example

#jquery #coding #change button #using jquery

Upload, Preview & Download Images using JavaScript & PHP

In this guide, you’ll learn how to Upload, Preview & Download Images using JavaScript & PHP.

To create Upload, Preview & Download Images using JavaScript & PHP. First, you need to create two Files one PHP File and another one is CSS File.

1: First, create a PHP file with the name of index.php

 

<?php
//if download button clicked
if(isset($_POST['downloadBtn'])){
    //getting the user img url from input field
    $imgURL = $_POST['file']; //storing in variable
    $regPattern = '/\.(jpe?g|png|gif|bmp)$/i'; //pattern to validataing img extension
    if(preg_match($regPattern, $imgURL)){ //if pattern matched to user img url
        $initCURL = curl_init($imgURL); //intializing curl
        curl_setopt($initCURL, CURLOPT_RETURNTRANSFER, true);
        $downloadImgLink = curl_exec($initCURL); //executing curl
        curl_close($initCURL); //closing curl
        // now we convert the base 64 format to jpg to download
        header('Content-type: image/jpg'); //in which extension you want to save img
        header('Content-Disposition: attachment;filename="image.jpg"'); //in which name you want to save img
        echo $downloadImgLink;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Download in PHP | Codequs</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="preview-box">
            <div class="cancel-icon"><i class="fas fa-times"></i></div>
            <div class="img-preview"></div>
            <div class="content">
                <div class="img-icon"><i class="far fa-image"></i></div>
                <div class="text">Paste the image url below, <br/>to see a preview or download!</div>
            </div>
        </div>
        <form action="index.php" method="POST" class="input-data">
            <input id="field" type="text" name="file" placeholder="Paste the image url to download..." autocomplete="off">
            <input id="button" name="downloadBtn" type="submit" value="Download">
        </form>
    </div>
    <script>
        $(document).ready(function(){
            //if user focus out from the input field
            $("#field").on("focusout", function(){
                //getting user entered img URL
                var imgURL = $("#field").val();
                if(imgURL != ""){ //if input field isn't blank
                    var regPattern = /\.(jpe?g|png|gif|bmp)$/i; //pattern to validataing img extension
                    if(regPattern.test(imgURL)){ //if pattern matched to image url
                        var imgTag = '<img src="'+ imgURL +'" alt="">'; //creating a new img tag to show img
                        $(".img-preview").append(imgTag); //appending img tag with user entered img url
                        // adding new class which i've created in css
                        $(".preview-box").addClass("imgActive");
                        $("#button").addClass("active");
                        $("#field").addClass("disabled");
                        $(".cancel-icon").on("click", function(){
                            //we'll remove all new added class on cancel icon click
                            $(".preview-box").removeClass("imgActive");
                            $("#button").removeClass("active");
                            $("#field").removeClass("disabled");
                            $(".img-preview img").remove();
                            // that's all in javascript/jquery now the main part is PHP
                        });
                    }else{
                        alert("Invalid img URL - " + imgURL);
                        $("#field").val('');//if pattern not matched we'll leave the input field blank
                    }
                }
            });
        });
    </script>
    
</body>
</html>

 

2: Second, create a CSS file with the name of style.css

 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
html,body{
    display: grid;
    height: 100%;
    place-items: center;
}
::selection{
   color: #fff;
   background: #4158d0;    
}
.wrapper{
    height: 450px;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.wrapper .preview-box{
    position: relative;
    width: 100%;
    height: 320px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px dashed #c2cdda;
}
.preview-box.imgActive{
    border: 2px solid transparent;
}
.preview-box .cancel-icon{
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 999;
    color: #4158d0;
    font-size: 20px;
    cursor: pointer;
    display: none;
}
.preview-box.imgActive:hover .cancel-icon{
    display: block;
}
.preview-box .cancel-icon:hover{
    color: #ff0000;
}
.preview-box .img-preview{
    height: 100%;
    width: 100%;
    position: absolute;
}
.preview-box .img-preview img{
    height: 100%;
    width: 100%;
    border-radius: 5px;
}
.wrapper .preview-box .img-icon{
    font-size: 100px;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.wrapper .preview-box .text{
    font-size: 18px;
    font-weight: 500;
    color: #5B5B7B;
}
.wrapper .input-data{
    height: 130px;
    width: 100%;;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
.wrapper .input-data #field{
    width: 100%;
    height: 50px;
    outline: none;
    font-size: 17px;
    padding: 0 15px;
    user-select: auto;
    border-radius: 5px;
    border: 2px solid lightgrey;
    transition: all 0.3s ease;
}
.input-data #field.disabled{
    color: #b3b3b3;
    pointer-events: none;
}
.wrapper .input-data #field:focus{
    border-color: #4158d0;
}
.input-data #field::placeholder{
    color: #b3b3b3;
}
.wrapper .input-data #button{
    height: 50px;
    width: 100%;
    border: none;
    outline: none;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.5;
    pointer-events: none;
    background: linear-gradient(-135deg, #c850c0, #4158d0);
    transition: all 0.3s ease;
}
.input-data #button.active{
    opacity: 1;
    pointer-events: auto;
}
.input-data #button:active{
    transform: scale(0.99);
}

Now you’ve successfully created a How to Upload, Preview & Download Image using JavaScript & PHP.

Duck Hwan

1664964857

파이썬으로 스크린 레코더 만들기

Python pyautogui 라이브러리는 마우스 및 키보드 제어를 허용하는 자동화 라이브러리입니다. 또는 Python 스크립트를 사용하여 다른 응용 프로그램과의 상호 작용을 설정하기 위해 마우스와 키보드의 움직임을 자동화하는 것을 용이하게 한다고 말할 수 있습니다. 이 튜토리얼에서는 이 API를 사용하여 스크린샷을 찍은 다음 다른 라이브러리를 사용하여 해당 화면 쇼를 연결하고 화면 레코더를 만듭니다. Python 환경에 설치하려면 pyautogui 다음 pip install 명령을 실행합니다.

Pyautogui 설치

pip install pyautogui

필요한 모듈

  • Numpy: Numpy 를 설치하려면 터미널에 아래 명령을 입력하십시오.
pip install numpy
  • pyautogui: pyautogui 를 설치하려면 터미널에 아래 명령을 입력하십시오.
pip install pyautogui
  • OpenCV: OpenCV 를 설치하려면 터미널에 아래 명령을 입력하십시오.
pip install opencv-python

필요한 모듈을 가져오는 것부터 시작하겠습니다.

import cv2 as cv
import pyautogui
import numpy as np

이제 pyautogui를 사용하여 디스플레이의 화면 크기를 알아보겠습니다. size() 기능.

#(width,height)
screen_size=pyautogui.size()

VideoWriter() 다음으로, 비디오 프레임을 기록할 객체 를 초기화해야 합니다 .

#initialize the object
video = cv.VideoWriter('Recording.avi', 
                        cv.VideoWriter_fourcc(*'MJPG'), 
                        20, 
                        screen_size)
  • Recording.avi 녹화할 비디오의 파일 이름입니다.
  • cv.VideoWriter_fourcc(*'MJPG') 프레임을 압축하는 4자리 코드를 설정합니다.
  • 20 비디오 스트림의 프레임 속도입니다.
  • screen_size 비디오 프레임의 높이와 너비입니다.

video 이제 디스플레이의 스크린샷을 캡처하고 해당 이미지를 개체 에 쓰는 루프를 만들어야 합니다.

print("Recording.....")
while True:
    #take screenshot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()
  • screenshot() 기능은 화면을 캡처합니다.
  • array(screen_shot_img) OpenCV는 numpy 배열과 함께 작동해야 하기 때문에 screen_shot_image를 numpy 배열로 변환합니다.
  • cvtColor() OpenCV는 기본적으로 BRG 형식으로 이미지를 기록하므로 이미지의 색상 형식을 BGR에서 RGB로 변경하므로 RGB로 변환하는 것이 중요합니다.
  • write(frame) 함수는 프레임을 비디오 객체에 기록합니다.
  • imshow() 라이브 비디오 녹화를 표시합니다. 더 나은 성능을 위해 녹화 프레임 창을 최소화할 수 있습니다.
  • 화면 녹화를 닫으려면 라이브 녹화 화면에서 "q"를 누르거나 CTRL+Z를 입력하여 프로그램을 종료합니다.

이제 모든 코드를 모아서 실행하십시오.

전체 코드:

import cv2 as cv
import pyautogui
import numpy as np

#(width,height)
screen_size=pyautogui.size()

#initialize the object
video = cv.VideoWriter('Recording.avi',  
                         cv.VideoWriter_fourcc(*'MJPG'), 
                         20, screen_size)

print("Recording.....")
while True:
    #click screen shot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()

이제 위의 지침에 따라 Python에서 스크린 레코더를 만들 수 있습니다. 즐거운 코딩!!!

中條 美冬

1664975766

Python でスクリーン レコーダーを作成する

Python pyautogui ライブラリは、マウスとキーボードの制御を可能にする自動化ライブラリです。または、マウスとキーボードの動きを自動化して、Python スクリプトを使用して他のアプリケーションとの対話を確立することが容易になると言えます。このチュートリアルでは、この API を使用してスクリーンショットを撮り、他のライブラリを使用してそれらのスクリーン ショーを連鎖させ、スクリーン レコーダーを作成します。Python 環境用にインストールするpyautogui には、次の pip install コマンドを実行します。

Pyautogui をインストールする

pip install pyautogui

必要なモジュール

  • Numpy: Numpyをインストールするには、ターミナルで次のコマンドを入力します。
pip install numpy
  • pyautogui: pyautoguiをインストールするには、ターミナルで次のコマンドを入力します。
pip install pyautogui
  • OpenCV: OpenCVをインストールするには、ターミナルで次のコマンドを入力します。
pip install opencv-python

必要なモジュールのインポートから始めましょう。

import cv2 as cv
import pyautogui
import numpy as np

それでは、pyautogui を使用してディスプレイの画面サイズを取得しましょう。size() 関数。

#(width,height)
screen_size=pyautogui.size()

次に、VideoWriter() ビデオ フレームを書き込むオブジェクトを初期化する必要があります。

#initialize the object
video = cv.VideoWriter('Recording.avi', 
                        cv.VideoWriter_fourcc(*'MJPG'), 
                        20, 
                        screen_size)
  • Recording.avi は、記録するビデオのファイル名です。
  • cv.VideoWriter_fourcc(*'MJPG') フレームを圧縮する 4 文字のコードを設定します。
  • 20 ビデオストリームのフレームレートです。
  • screen_size ビデオ フレームの高さと幅です。

ここで、ディスプレイのスクリーンショットをキャプチャし、それらの画像をvideo オブジェクトに書き込むループを作成する必要があります。

print("Recording.....")
while True:
    #take screenshot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()
  • このscreenshot() 関数は画面をキャプチャします。
  • array(screen_shot_img) OpenCVはnumpy配列で動作するはずなので、screen_shot_imageをnumpy配列に変換します。
  • cvtColor() OpenCVはデフォルトで画像をBRG形式で書き込むため、画像の色形式をBGRからRGBに変更します。したがって、それらをRGBに変換することが重要です。
  • このwrite(frame) 関数は、フレームをビデオ オブジェクトに書き込みます。
  • imshow() ライブビデオ録画が表示されます。パフォーマンスを向上させるために、レコーディング フレーム ウィンドウを最小化できます。
  • 画面記録を閉じるには、ライブ記録画面で「q」を押すか、CTRL+Z を入力してプログラムを強制終了します。

すべてのコードをまとめて実行します。

完全なコード:

import cv2 as cv
import pyautogui
import numpy as np

#(width,height)
screen_size=pyautogui.size()

#initialize the object
video = cv.VideoWriter('Recording.avi',  
                         cv.VideoWriter_fourcc(*'MJPG'), 
                         20, screen_size)

print("Recording.....")
while True:
    #click screen shot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()

上記の手順に従って、Python でスクリーン レコーダーを作成できます。ハッピーコーディング!!!


 

Hacer una grabadora de pantalla en Python

La biblioteca Python pyautogui es una biblioteca de automatización que permite el control del mouse y el teclado. O podemos decir que nos facilita automatizar el movimiento del ratón y del teclado para establecer la interacción con la otra aplicación mediante el script de Python. En este tutorial, usaremos esta API para tomar capturas de pantalla y luego usaremos otras bibliotecas para encadenar esos programas de pantalla y crear una grabadora de pantalla. Para realizar la instalación pyautogui en su entorno de Python, ejecute el siguiente comando pip install:

Instalar Pyautogui

pip install pyautogui

Módulos necesarios

  • Numpy: para instalar Numpy, escriba el siguiente comando en la terminal.
pip install numpy
  • pyautogui: para instalar pyautogui, escriba el siguiente comando en la terminal.
pip install pyautogui
  • OpenCV: para instalar OpenCV, escriba el siguiente comando en la terminal.
pip install opencv-python

Comencemos con la importación de los módulos requeridos.

import cv2 as cv
import pyautogui
import numpy as np

Ahora, obtengamos el tamaño de pantalla de nuestra pantalla usando pyautogui. size() función.

#(width,height)
screen_size=pyautogui.size()

A continuación, debemos inicializar el VideoWriter() objeto que escribirá los cuadros de video.

#initialize the object
video = cv.VideoWriter('Recording.avi', 
                        cv.VideoWriter_fourcc(*'MJPG'), 
                        20, 
                        screen_size)
  • Recording.avi es el nombre del archivo del video que vamos a grabar.
  • cv.VideoWriter_fourcc(*'MJPG') establecerá el código de cuatro caracteres que comprime los fotogramas.
  • 20 es la velocidad de fotogramas del flujo de vídeo.
  • screen_size es la altura y el ancho del cuadro de video.

Ahora, necesitamos crear un bucle que capture la captura de pantalla de la pantalla y escriba esas imágenes en el video objeto.

print("Recording.....")
while True:
    #take screenshot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()
  • La screenshot() función capturará la pantalla.
  • array(screen_shot_img) convertirá screen_shot_image en una matriz numpy porque se supone que OpenCV funciona con matrices numpy.
  • cvtColor() cambiará el formato de color de la imagen de BGR a RGB porque OpenCV, por defecto, escribe las imágenes en formato BRG, por lo que es importante convertirlas a RGB.
  • La write(frame) función escribirá el marco en el objeto de video.
  • imshow() mostrará una grabación de video en vivo. Para un mejor rendimiento, puede minimizar la ventana del cuadro de grabación.
  • Para cerrar la grabación de pantalla, presione "q" en la pantalla de grabación en vivo o elimine el programa escribiendo CTRL+Z.

Ahora junta todo el código y ejecuta.

Código completo:

import cv2 as cv
import pyautogui
import numpy as np

#(width,height)
screen_size=pyautogui.size()

#initialize the object
video = cv.VideoWriter('Recording.avi',  
                         cv.VideoWriter_fourcc(*'MJPG'), 
                         20, screen_size)

print("Recording.....")
while True:
    #click screen shot
    screen_shot_img = pyautogui.screenshot()

    #convert into array
    frame = np.array(screen_shot_img)

    #change from BGR to RGB
    frame = cv.cvtColor(frame, cv.COLOR_BGR2RGB)

    #write frame
    video.write(frame)

    #display the live recording 
    cv.imshow("Recording Frame(Minimize it)", frame)    
    if cv.waitKey(1) == ord("q"):
        break

cv.destroyAllWindows()
video.release()

Ahora puede crear una grabadora de pantalla en Python con las instrucciones anteriores. ¡¡¡Feliz codificación!!!