FFmpeg is a cross-platform solution for streaming audio and video as well as recording and conversion. It’s also useful to convert multimedia files between various formats. FFmpeg includes libavcodec audio/video codec library in it.

This tutorial will help you to install FFmpeg on Ubuntu Ubuntu 18.04 &amp; 16.04 LTS systems with easy steps.
<h2 class="heading1">Step 1 – Setup FFmpeg PPA</h2>
FFmpeg 4 is the latest available version for installation on Ubuntu. To install the latest version, you need to configure PPA on your system. Execute below command to add FFmpeg PPA on Ubuntu system.
<pre>sudo add-apt-repository ppa:jonathonf/ffmpeg-4
</pre>
<h2 class="heading1">Step 2 – Install FFmpeg on Ubuntu</h2>
After enabling the PPA, Lets exec below commands to install ffmpeg on Ubuntu system. This will also install many packages for the dependencies.
<pre>sudo apt-get update
sudo apt-get install ffmpeg
</pre>
<h2 class="heading1">Step 3 – Check FFmpeg Version</h2>
After successfully install FFmpeg, let’s check the version installed on the system.
<pre>ffmpeg -version

ffmpeg version 4.0.3-1~18.04.york0 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 7 (Ubuntu 7.3.0-27ubuntu1~18.04)
...
</pre>
<h2 class="heading1">Step 4 – FFmpeg Basic Commands</h2>
Here is the list of the ffmepg basic command options used with ffmpeg command line tool.
<div class="pretty-label">FFmpeg command examples</div>
<pre>ffmpeg -version: show version
ffmpeg -formats: show available formats
ffmpeg -codecs: show available codecs
ffmpeg -decoders: show available decoders
ffmpeg -encoders: show available encoders
ffmpeg -bsfs: show available bit stream filters
ffmpeg -protocols: show available protocols
ffmpeg -filters: show available filters
ffmpeg -pix_fmts: show available pixel formats
ffmpeg -layouts: show standard channel layouts
ffmpeg -sample_fmts: show available audio sample formats</pre>
<a href="https://www.ffmpeg.org/documentation.html" target="_blank" rel="noopener noreferrer">Click here</a> to read more about ffmpeg on its official site.
<h2 class="heading1">Step 5 – Basic Examples</h2>
Below are some examples of uses of ffmpeg command line.

Reduce .mov File Size:
<pre>ffmpeg -i in.mov -c:v libx264 -c:a copy -crf 20 out.mov
</pre>
Convert .move To .mp4
<pre>ffmpeg -i in.mov -vcodec copy -acodec aac -strict experimental -ab 128k out.mp4</pre>

FFmpeg is a cross-platform solution for streaming audio and video as well as recording and conversion. It’s also useful to convert multimedia fil...

How to Install FFmpeg on Ubuntu 18.04 & 16.04 - TCMHACK

How to Install FFmpeg on Ubuntu 18.04 & 16.04

Over three years after&nbsp;Google&nbsp;&nbsp;<a href="http://www.businessinsider.com/google-just-paid-25-million-to-buy-the-entire-app-web-domain-2015-2" target="_blank" rel="noopener">paid $25 million</a>&nbsp;to gain the exclusive rights to the &ldquo;.app&rdquo; top-level domain, the company is at last making .app domains available to register starting today and running through May 7, at 9 AM PDT via Google&rsquo;s Early Access Program. The following day, May 8, the domains will go on sale for the general public, including through other registrars.
The new top-level domain (TLD) is an obvious choice for app developers and others in the tech industry, as it serves as an easy-to-remember alternative to .com domains &ndash; where inventory has long been running low for popular words. In addition to the expected demand, Google is requiring HTTPS for all. app websites. This built-in security protects against ad malware, tracking injection by internet service providers, and safeguards against spying on open Wi-Fi networks, the company explains. Google has been an advocate of pushing the web towards HTTPS adoption, noting last fall&nbsp;<a href="https://techcrunch.com/2017/10/20/https-is-booming-says-google/" target="_blank" rel="noopener">that 64 percent of traffic through its Chrome browser</a>&nbsp;on Android was protected, up from 42 percent the year before. Chrome traffic on Mac was up to 75 percent, and on Windows up to 66 percent at the same time. The increases were due to a number of actions on Google&rsquo;s part, including its&nbsp;decision&nbsp;to flag all websites using HTTP to transmit private information as &ldquo;insecure.&rdquo; This year,&nbsp;<a href="https://techcrunch.com/2018/02/08/chrome-will-soon-mark-all-unencrypted-pages-as-not-secure/" target="_blank" rel="noopener">Google said it would mark all pages without HTTPS</a>&nbsp;encryption as insecure starting in July with the launch of Chrome 68. Given its plans, it makes sense that Google&rsquo;s new domain addition would also include HTTPS protection built-in. Still, it&rsquo;s something of a milestone, Google notes. &ldquo;Because .app will be the first TLD with enforced security made available for general registration, it&rsquo;s helping move the web to an&nbsp;<a href="https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html" target="_blank" rel="noopener">HTTPS-everywhere future</a>&nbsp;in a big way,&rdquo; the company writes in its&nbsp;<a href="https://www.blog.google/topics/developers/introducing-app-more-secure-home-apps-web/" target="_blank" rel="noopener">announcement</a>&nbsp;of the new TLD. <img class="aligncenter wp-image-71 size-full" src="../../../../uploads/1744909050424-get-app-screenshot.png" alt="" width="1512" height="800"> Prior to the public launch of .app, Google had reached out to potential candidates, offering them a first crack at grabbing a .app domain in order to showcase the potential use cases. Some of those who are already live on .app domains include Outdoor Voices, Cash App, Sitata, Albert, Picnic, Trail, BNEXT, Bark, CallApp, The Podcast App, Pickle, MenaVR and many others from around the world. The company also removed the requirement that limited the domain to app developers, though Google suggests the name makes the most sense in that market. In an&nbsp;<a href="https://domainnamewire.com/2018/03/07/app-domains-are-coming-qa-with-google/" target="_blank" rel="noopener">interview last month with Domain Name Wire</a>, Google said that it aims to make .app domains affordable &ndash; it expects the pricing to be less than its other TLDs like .how or .soy, for example. The site said that would mean wholesale pricing would be around $10-12 and retail registrations would be $20. (Pricing was not detailed in today&rsquo;s announcement, however.) Interested .app domain shoppers can register their domain of choice today through May 7, 2018 starting at 9 AM PDT, if they want to pay the additional fee for early access ahead of the domain&rsquo;s launch to the public through other registrars. More info is on the&nbsp;<a href="https://get.app/" target="_blank" rel="noopener">get.app website</a>.

Over three years after Google  paid $25 million to gain the exclusive rights to the “.app” top-level domain, the company is at last making .app d...

Google is launching .app domains, the first TLDs secured with built-in HTTPS - TCMHACK

Google is launching .app domains, the first TLDs secured with built-in HTTPS

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps.
Before going to next steps, I'm assuming you already have a file stored in fileToBeUpload variable in Javascript.
Let's Begin.
<h3>Step 1: Add the AWS SDK into the head section of your file.</h3>
<pre class="wp-block-preformatted">&lt;script src="<a href="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js">https://sdk.amazonaws.com/js/aws-sdk-2.207.0.min.js</a>"&gt;&lt;/script&gt; </pre>
<h3>Step 2: Initiate the AWS Configuration.</h3>
There are two to initialize the AWS Configuration.
A. By using the AWS Key &amp; Secret Key but it is not advisable to display your keys directly on page.
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; accessKeyId: 'AWS_ACCESS_KEY',
&nbsp; &nbsp; &nbsp; &nbsp; secretAccessKey: 'AWS_SECRET_KEY',
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
B. By using the AWS Identity Pool Id (I recommand using the identityPoolId)
<pre class="wp-block-preformatted">&lt;script type="text/javascript"&gt;
&nbsp; &nbsp; AWS.config.update({
&nbsp; &nbsp; &nbsp; &nbsp; credentials: new AWS.CognitoIdentityCredentials({
 IdentityPoolId: 'AWS_Identity_Pool_Id'
 }),
 region: 'AWS_REGION'
&nbsp; &nbsp; });
&lt;/script&gt;</pre>
<h3>Step 3: Lets start the uploading</h3>
<div>
<pre>var bucketName = "AWS_BUCKET_NAME"; var fileToBeUpload = "FILE_TO_BE_UPLOAD"; var filePath = "demo/user_uploaded/"; // File will be saved to this folder on aws s3. // Initialize the AWS Object var bucket = new AWS.S3({ apiVersion: "2006-03-01", params: { Bucket: bucketName }, }); var params = { Key: filePath, ContentType: fileToBeUpload.type, Body: fileToBeUpload, ContentDisposition: "attachment", // if you want to enable file download via public url. }; /* turn off the timeout (Optional) */ AWS.config.httpOptions.timeout = 0; // upload file bucket.upload(params).on("httpUploadProgress", function (evt) { var uploaded = Math.round((evt.loaded / evt.total) * 100); console.log("File uploaded", uploaded, "%"); }) .send(function (err, data) { if (err) { // an error occurred, handle the error console.log(err, err.stack); return; } var fileUrl = data.Location; console.log("File URL:", fileUrl); alert("File is uploaded successfully!"); });</pre>
</div>
To upload the file successfully, you need to enable CORS configuration on S3.
Please comment below if you have any question.

Uploading files on AWS S3 is very easy with AWS Javascript SDK. We're going to upload files to S3 in some simple steps...

AWS S3 file upload with progress bar using javascript sdk - TCMHACK

AWS S3 file upload with progress bar using javascript sdk

In the web application, generally, the file is downloaded from the same server. But sometimes the file needs to be downloaded from the remote server. To download file with PHP, you need to force the browser to download the file.&nbsp;<a href="/how-to-force-download-file-in-php/">Force download in PHP</a>&nbsp;helps to download file from the server and save to the local drive.

In the example code snippet, we will show you how to force download file from URL in PHP. You can download any types of file (image, ZIP, video, audio, etc) from the remote server using PHP.

Use the&nbsp;readfile()&nbsp;function with&nbsp;<code>application/x-file-to-save</code>&nbsp;Content-type&nbsp;header, to download a ZIP file from remote URL using PHP.
<pre>//&nbsp;Remote&nbsp;download&nbsp;URL
$remoteURL&nbsp;=&nbsp;'https://www.example.com/files/project.zip';

//&nbsp;Force&nbsp;download
header("Content-type:&nbsp;application/x-file-to-save");&nbsp;
header("Content-Disposition:&nbsp;attachment;&nbsp;filename=".basename($remoteURL));
ob_end_clean();
readfile($remoteURL);
exit;</pre>
Note that: The&nbsp;ob_end_clean()&nbsp;function will help to download a large file from the remote server in PHP.

In the web application, generally, the file is downloaded from the same server. But sometimes the file needs to be downloaded from the remote ser...

How to Force Download File from Remote Server in PHP - TCMHACK

How to Force Download File from Remote Server in PHP

To download a file in PHP, you need to force the browser to download file except display. In this article, we are going to show how to download a file from directory or server in PHP. Using&nbsp;<code>header()</code>&nbsp;and&nbsp;<code>readfile()</code>&nbsp;function, you can easily download a file in PHP. Here we&rsquo;ll provide the example PHP code to force download file in PHP. Also, this simple PHP script helps to implement a download link which downloads a file from the directory. The following example script can be used for download any types of file like text, image, document, pdf, zip, etc.
<h2>Download a File in PHP</h2>
<pre>$fileName = basename('tcmhack.txt');
$filePath&nbsp;=&nbsp;'files/'.$fileName;
if(!empty($fileName)&nbsp;&amp;&amp;&nbsp;file_exists($filePath)){
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Define&nbsp;headers
&nbsp;&nbsp;&nbsp;&nbsp;header("Cache-Control:&nbsp;public");
&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Description:&nbsp;File&nbsp;Transfer");
&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Disposition:&nbsp;attachment;&nbsp;filename=$fileName");
&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Type:&nbsp;application/zip");
&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Transfer-Encoding:&nbsp;binary");
&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Read&nbsp;the&nbsp;file
&nbsp;&nbsp;&nbsp;&nbsp;readfile($filePath);
&nbsp;&nbsp;&nbsp;&nbsp;exit;
}else{
&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;'The&nbsp;file&nbsp;does&nbsp;not&nbsp;exist.';
}</pre>
<h2>Download a File Through Anchor Link</h2>
Sometimes you need to provide a link to the user for download file from the server. Use the below sample code to display an HTML link to download a file from the directory using PHP. HTML Code:
<pre>&lt;a href="download.php?file=tcmhack.png"&gt;Dowload File&lt;/a&gt;
</pre>
PHP Code (download.php):
<pre>&lt;?php
if(!empty($_GET['file'])){
&nbsp;&nbsp;&nbsp;&nbsp;$fileName&nbsp;=&nbsp;basename($_GET['file']);
&nbsp;&nbsp;&nbsp;&nbsp;$filePath&nbsp;=&nbsp;'files/'.$fileName;
&nbsp;&nbsp;&nbsp;&nbsp;if(!empty($fileName)&nbsp;&amp;&amp;&nbsp;file_exists($filePath)){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Define&nbsp;headers
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header("Cache-Control:&nbsp;public");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Description:&nbsp;File&nbsp;Transfer");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Disposition:&nbsp;attachment;&nbsp;filename=$fileName");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Type:&nbsp;application/zip");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header("Content-Transfer-Encoding:&nbsp;binary");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Read&nbsp;the&nbsp;file
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;readfile($filePath);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exit;
&nbsp;&nbsp;&nbsp;&nbsp;}else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;'The&nbsp;file&nbsp;does&nbsp;not&nbsp;exist.';
&nbsp;&nbsp;&nbsp;&nbsp;}
}</pre>

To download a file in PHP, you need to force the browser to download file except display. In this article, we are going to show how to download a...

How to Force Download File in PHP - TCMHACK

How to Force Download File in PHP

Before taking any action with date input, it always a great idea to validate the date string. Date validation helps to check whether the provided string is a valid date format. Using the DateTime class you can easily check if the date string is valid in PHP. In the example code snippet, we will show you how to validate a date string in PHP. It is very useful for server-side validation of the date input using PHP. The&nbsp;validateDate()&nbsp;function checks whether the given string is a valid date using PHP. It uses PHP DateTime class to validate date based on the specified format. This function returns TRUE if date string is valid, otherwise FALSE.
<ul class="bullet_disk_list">
<li><code>$date</code>&nbsp;&ndash; Required. The date string to validate.</li>
<li><code>$format</code>&nbsp;&ndash; Optional. The format of the date string.</li>
</ul>
<pre>function&nbsp;validateDate($date,&nbsp;$format&nbsp;=&nbsp;'Y-m-d'){
&nbsp;&nbsp;&nbsp;&nbsp;$d&nbsp;=&nbsp;DateTime::createFromFormat($format,&nbsp;$date);
&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;$d&nbsp;&amp;&amp;&nbsp;$d-&gt;format($format)&nbsp;===&nbsp;$date;
}</pre>
Call the&nbsp;<code>validateDate()</code>&nbsp;function and pass the date string in the first parameter.
<pre>//&nbsp;Returns&nbsp;false
var_dump(validateDate('2018-14-01'));&nbsp;
var_dump(validateDate('20122-14-01'));
var_dump(validateDate('2018-10-32'));
var_dump(validateDate('2017-5-25'));

//&nbsp;Returns&nbsp;true
var_dump(validateDate('2018-12-01'));
var_dump(validateDate('1970-11-28'));</pre>
By default, the format is set to&nbsp;<code>Y-m-d</code>. If you want to allow day and month without leading zeroes, specify the respective format (<code>Y-n-j</code>).
<pre>//&nbsp;Returns&nbsp;true
var_dump(validateDate('2018-2-5',&nbsp;'Y-n-j'));</pre>

Before taking any action with date input, it always a great idea to validate the date string. Date validation helps to check whether the provided...

How to Validate Date String in PHP - TCMHACK

How to Validate Date String in PHP

The Regular Expressions are the easiest option to change the characters format based on the specific pattern. You can change the word format in a string using PHP with Regex. In the example code snippet, we will show you how to insert space before capital letter in a string using PHP. Sometimes the words are bunched together in a string, and you want to separate the words with spaces. In this case, you need to put a space in front of each word for differentiating the words in the string. Using the PHP preg_replace() function, you can add space in front of uppercase character in a string. The following code separates the words by spaces and inserts space before the capital letter in a string using&nbsp;preg_replace() in PHP.
<pre>$string = 'TcmHackWebsite';
$words&nbsp;=&nbsp;preg_replace('/(?&lt;!\&nbsp;)[A-Z]/',&nbsp;'&nbsp;$0',&nbsp;$string);</pre>
Output:
<pre>Tcm Hack Website</pre>

The Regular Expressions are the easiest option to change the characters format based on the specific pattern. You can change the word format in a...

How to Insert Space Before Capital Letters in a String using PHP - TCMHACK

How to Insert Space Before Capital Letters in a String using PHP

Generally, the&nbsp;jQuery toggle()&nbsp;method is used to show and hide the HTML element on the web page. But if you don&rsquo;t want to use the jQuery library, the toggle effect can be easily added using JavaScript. Using JavaScript you can check the visibility of an element and show/hide the HTML element based on their visibility. The following code snippet checks the visibility and toggle between show &amp; hide the HTML element with JavaScript.
<ul class="bullet_disk_list">
<li>Use JavaScript&nbsp;style display&nbsp;property to check whether an element is hidden.</li>
<li>If the element is invisible, display it, otherwise hide it.</li>
</ul>
<pre>var element = document.getElementById('elementID');
if(element.style.display === "none"){
 element.style.display = "block";
} else {
 element.style.display = "none";
}</pre>
The following code snippet shows how you can hide and show the HTML element using JavaScript. JavaScript The toggle() function toggle display of the HTML element using JavaScript.
<ul class="bullet_disk_list">
<li>Pass the element ID which you want to show/hide based on the visibility.</li>
</ul>
<pre>&lt;script&gt;
 function toggle(ID){
 var element = document.getElementById(ID);
 if(element.style.display === "none"){
 element.style.display = "block";
 }else{
 element.style.display = "none";
 }
 }
&lt;/script&gt;</pre>
HTML Call the&nbsp;<code>toggle('elementID')</code>&nbsp;on click event to show/hide the DIV element.
<pre>&lt;button onclick="toggle('divID')"&gt;Toggle Hide/Show&lt;/button&gt;

&lt;div id="divID"&gt;
 This is a DIV element.
&lt;/div&gt;</pre>

Generally, the jQuery toggle() method is used to show and hide the HTML element on the web page. But if you don’t want to use the jQuer...

How to Toggle (Show/Hide) Element using JavaScript - TCMHACK

How to Toggle (Show/Hide) Element using JavaScript

The placeholder displays a short hint of the expected value of an input field. It helps the user to know about the format of the input before enting a value. Using the placeholder attribute, you can add a placeholder text to HTML input field. Generally, the color of the placeholder text is grey for most browser. The placeholder text color also can be changed using the ::placeholder selector in CSS. Custom placeholder color is very useful to make the input filed UI identical with HTML form UI. In this code snippet, we will show you how to change the placeholder color of a form element using CSS. The&nbsp;::placeholder&nbsp;selector (pseudo-element) allows you to customize the style of the placeholder text in the input fields. The following code snippet changes the placeholder text color to red with ::placeholder element using CSS.
<pre>&lt;input type="text" placeholder="Enter your email..."&gt;</pre>
The following CSS will change the placeholder color across all major browsers.
<pre class="hljs">::-webkit-input-placeholder { /* Chrome, Opera, and Safari */
 color: red;
}
:-moz-placeholder { /* Firefox 18- */
 color: red;
}
::-moz-placeholder { /* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder { /* Microsoft Edge */
 color: red;
}</pre>

The placeholder displays a short hint of the expected value of an input field. It helps the user to know about the format of the input before ent...

How to Change Input Placeholder Color using CSS - TCMHACK

How to Change Input Placeholder Color using CSS

Before submitting the user&rsquo;s input to the server-side, it&rsquo;s always a good approach to validate it on the client-side script. The Name input is a commonly used field for the HTML form of the web application. When you want the full name input from the user, the input value must be checked whether the user provides a valid name (first name and last name). Using JavaScript, the full name validation can be easily implemented in the form to check whether the user provides their first name and last name. The REGEX (Regular Expression) is the easiest way to validate Full Name (first name + last name) format in JavaScript. In the following code snippet, we will show you how to validate the first and last name with Regular Expression using JavaScript.
<ul class="bullet_disk_list">
<li>test()&nbsp;&ndash; This function is used to perform a regular expression match in JavaScript.</li>
</ul>
<pre>var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
var name = document.getElementById('nameInput').value;
if(!regName.test(name)){
 alert('Invalid name given.');
} else {
 alert('Valid name given.');
}</pre>
The following code snippet shows how you can validate the input field for the full name in HTML form using JavaScript.
<pre>&lt;p&gt;Full Name: &lt;input id="name" value=""&gt;&lt;/p&gt;
&lt;input type="button" onclick="validate();" value="Validate Name"&gt;</pre>
<pre>&lt;script&gt;
function validate(){
 var regName = /^[a-zA-Z]+ [a-zA-Z]+$/;
 var name = document.getElementById('name').value;
 if(!regName.test(name)){
 alert('Please enter your full name (first &amp; last name).');
 document.getElementById('name').focus();
 return false;
 } else {
 alert('Valid name given.');
 return true;
 }
}
&lt;/script&gt;</pre>

Before submitting the user’s input to the server-side, it’s always a good approach to validate it on the client-side script. The Name input is a ...

How to Validate First and Last Name with Regular Expression using JavaScript - TCMHACK

How to Validate First and Last Name with Regular Expression using JavaScript

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHeight property provide an easy way to retrieve the original dimensions of the image using JavaScript. You can easily get the original size (width and height) of the image using JavaScript.

naturalWidth
Assume that you have an image which is originally 250px wide and you make it 550px wide by CSS style or HTML “width” property. The naturalWidth will return the original width 250 although the display width is 550.

naturalHeight
Assume that you have an image which is originally 100px high and you make it 250px high by CSS style or HTML “height” property. The naturalHeight will return the original height 100 although the display height is 250.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;</pre>
<pre>// HTML DOM image
var image = document.getElementById('image');

// image original width
var originalWidth = image.naturalWidth;

// image original height
var originalHeight = image.naturalHeight;</pre>
Get Real Image Dimensions by Button Click
The following code snippet shows how you can get the original size (width and height) of the image using JavaScript.
<pre>&lt;img src="tcmhack.png" id="image" width="500px" /&gt;

&lt;button onclick="getOriginalSize()"&gt;Get Dimensions&lt;/button&gt;
</pre>
<pre>function getOriginalSize(){ 
 var image = document.getElementById('image');
 
 var originalWidth = image.naturalWidth; 
 var originalHeight = image.naturalHeight;
 
 alert("Original width=" + originalWidth + ", " + "Original height=" + originalHeight);
}</pre>

When you working with the image dimensions, it’s always recommended to get the real width and height of the image. The naturalWidth and naturalHe...