Download Image using PHP – CodingNepal

Download YouTube Video Thumbnail in PHP & JavaScript

CodingNepal — Wed, 09 Jun 2021 14:15:38 +0000

Hey friends, today in this blog you’ll learn how to Save or Download YouTube Video Thumbnail or other Image Files using PHP cURL & JavaScript. In the earlier blog, I have shared a blog on how to create a URL Shortner Website using PHP and now it’s time to create a project to download YouTube video thumbnail using JavaScript & PHP.

In this project [Download YouTube Video Thumbnail], you can see in the image preview a white box or form with an input field, image preview area, and a download button. Download button is disabled until you paste a valid YouTube video URL or other image file URL.

When you paste YouTube video URL immediately, there appears a preview of the thumbnail of that video and you can download it. This thumbnail downloader accepts all types of YouTube video URLs means long or short URLs of the videos. And it also accepts any other image file like .jpg, .jepg, .png, .gif, and .webp.

Video Tutorial of YouTube Thumbnail Downloader

In the video, you have seen how this downloader looks like and how you can download a thumbnail or other image files by pasting their link or URL. In the video, you have also seen how I created this thumbnail downloader using HTML CSS JavaScript & PHP.

As you already know, To create this project I used only 6-8 lines of PHP cURL codes and they are used to download an image only and all other things are done using JavaScript like preview thumbnail. So if you don’t know PHP then you can also watch this video to learn JavaScript. I tried to explain each JavaScript & PHP line with comments and I hope you’ve understood the codes.

Let’s understand how I got a thumbnail from the URL and downloaded it but before this, you’ve to know how YouTube video URL looks like.

Long URL of the video – https://www.youtube.com/watch?v=FucPPCPDd2Y
Short URL of the same video – https://youtu.be/FucPPCPDd2Y

As you can see in both URLs there is the same video ID FucPPCPDd2Y of 11 lengths long and this ID is unique to each video and we need only this ID to get the thumbnail of this video. Using JavaScript, first, I got the user entered video URL and split it from the v= if the URL is long or split it from /be if the URL is short to get only video ID.

After I got the video ID, https://img.youtube.com/vi/VID_ID/maxresdefault.jpg is the thumbnail URL of the YouTube video. If you open this URL by replacing VID_ID with some random video ID then you’ll get a thumbnail of that video. I just replaced this VID_ID with the user entered video ID and inserted this full URL inside to show an image preview and at the same time I passed this URL in value of a hidden input to download this thumbnail using PHP. That’s it after I got a thumbnail, I just download it using PHP cURL.

Remember, YouTube has four types of thumbnail URLs and in this project, I only used one of them.

Low-Quality – https://img.youtube.com/vi/VID_ID/sddefault.jpg
Medium-Quality – https://img.youtube.com/vi/VID_ID/mqdefault.jpg
Hight-Quality – https://img.youtube.com/vi/VID_ID/hqdefault.jpg
Max High-Quality – https://img.youtube.com/vi/VID_ID/maxresdefault.jpg

Download YouTube Video Thumbnail [Source Codes]

To create this program [Download YouTube Video Thumbnail]. First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following codes into your file. First, create a PHP file with the name of index.php and paste the given codes into your PHP file. Remember, you’ve to create a file with .php extension.






  
  
  Download YouTube Video Thumbnail | CodingNepal
  
  


  
    Download Thumbnail
    
      Paste video url:
      
        
        
        
      
    
    
      
      
      Paste video url to see preview

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font - Poppins & Noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #7D2AE8;
}
::selection{
  color: #fff;
  background: #7D2AE8;
}
form{
  width: 450px;
  background: #fff;
  padding: 30px ;
  border-radius: 5px;
  box-shadow: 10px 10px 13px rgba(0,0,0,0.1);
}
form header{
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-top: 10px;
  color: #7D2AE8;
}
form .url-input{
  margin: 30px 0;
}
.url-input .title{
  font-size: 18px;
  color: #373737;
}
.url-input .field{
  margin-top: 5px;
  height: 50px;
  width: 100%;
  position: relative;
}
.url-input .field input{
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 0 15px;
  font-size: 15px;
  background: #F1F1F7;
  border-bottom: 2px solid #ccc;
  font-family: 'Noto Sans', sans-serif;
}
.url-input .field input::placeholder{
  color: #b3b3b3;
}
.url-input .field .bottom-line{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #7D2AE8;
  transform: scale(0);
  transition: transform 0.3s ease;
}
.url-input .field input:focus ~ .bottom-line,
.url-input .field input:valid ~ .bottom-line{
  transform: scale(1);
}
form .preview-area{
  border-radius: 5px;
  height: 220px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #8e46ec;
}
.preview-area.active{
  border: none;
}
.preview-area .thumbnail{
  width: 100%;
  display: none;
  border-radius: 5px;
}
.preview-area.active .thumbnail{
  display: block;
}
.preview-area.active .icon,
.preview-area.active span{
  display: none;
}
.preview-area .icon{
  color: #8e46ec;
  font-size: 80px;
}
.preview-area span{
  color: #8e46ec;
  margin-top: 25px;
}
form .download-btn{
  color: #fff;
  height: 53px;
  width: 100%;
  outline: none;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin: 30px 0 20px 0;
  border-radius: 5px;
  background: #7D2AE8;
  pointer-events: none;
  transition: background 0.3s ease;
}
.download-btn:hover{
  background: #6616d0;
}
@media screen and (max-width: 460px){
  body{
    padding: 0 20px;
  }
  form header{
    font-size: 24px;
  }
  .url-input .field,
  form .download-btn{
    height: 45px;
  }
  form .download-btn{
    font-size: 15px;
  }
  form .preview-area{
    height: 130px;
  }
  .preview-area .icon{
    font-size: 50px;
  }
  .preview-area span{
    margin-top: 10px;
    font-size: 12px;
  }
}

That’s all, now you’ve successfully created a project on Download YouTube Video Thumbnail using HTML CSS JavaScript & PHP. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

After extracting, move this folder inside htdocs of your XAMPP installation directory and start the apache server from xampp control panel and then open this url – localhost/thumbnail or localhost/thumbnail/index.php in your browser.

How to Upload, Preview & Download Image using JavaScript & PHP

CodingNepal — Wed, 30 Sep 2020 12:14:00 +0000

Hello reader, Today in this blog, you’ll learn how to Upload, Preview & Download Images using JavaScript & PHP. Earlier, I’ve shared many blogs related to PHP [Custom Simple PHP Chatbot, Send Email from Localhost, Login & Signup Form with Email Verification] and many more. Now time to create another program (Easily Download Image through URL) using PHP.

In this program [Image Download using PHP], on the webpage, there is an image preview box with an image gallery icon, one input field to paste the image URL, and a button to download the image. This input field is fully validation that means the user can’t upload any other URL except images.

When you paste a valid image URL that has like .png or .jpeg extension then there is shown a preview of that image, and the download button also active to download the image, by default the download button is disabled at first. When you click on the download button, it immediately downloads the image.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Download Image using JavaScript & PHP].

Video Tutorial of Download Image in JavaScript & PHP

In the video, you have seen how we can download any images on one click using PHP. I hope you’ve understood the basic codes behind creating this program. In this video, I’ve only created the design part of the Image Download Program. In the second part of this video, I have completed the JavaScript and PHP codes of this program. If you haven’t still watched this video, please watch because I’ve explained each line of JavaScript and PHP code with the comments.

This design is fully based on HTML & CSS but to validate image extension and show preview of the image I used JavaScript and to download images I used cUrl in PHP. cURL is a tool for transferring files and data with URL syntax, supporting multiple protocols – HTTP, FTP, TELNET, and more.

Download Image in JavaScript & PHP [Source Codes]

To create this program [Image Download using PHP]. First, you need to create two Files one PHP File and another one is CSS File. After creating these files just paste the following codes in your file. First, create a PHP file with the name of index.php and paste the given codes in your PHP file. Remember, you’ve to create a file with .php extension.






    
    Image Download in PHP | CodingNepal
    
    
    


    
        
            
            
            
                
                Paste the image url below, 
to see a preview or download!