Get picture width and height when uploading images

Often encounter picture upload problem, this time we will pass the image of the address, and high to the server, as for the picture upload does not say, here is the main picture upload to get pictures of the original width and height of the problem.

In general, when we upload the image to the server, the server will return an upload address to us, this is the URL of our image, but the light has this is not enough, because also the width and height of the picture to the server, this time you can do so. Directly on the code:

var img = new Image () img.src = URL

You can then use Img.width and Img.height to get the width and height of the picture. Of course, this is not enough, because the image upload is asynchronous, and can not directly use the method to obtain the width and height of the image, so that the acquisition is 0.

The uploaded image must be placed inside the body tag to use the Load event, and you can use AppendChild to insert the IMG tag inside the body tag (document.getelementsbytagname (' body ') [0]. AppendChild (IMG), this will have a problem, each time you upload a picture, the bottom of the page will have a graph, you can use display to hide it, and then use the OnLoad method, and so the picture is loaded.

Img.onload = function () {  w = img.width;  h = img.height        }

Then the request will be sent in a method inside, in the OnLoad event to invoke the method, otherwise the load method outside is not to obtain the width and height.

Of course, there is another way to use the ES6 approach.

//Picture is inserted into body tag, otherwise the Load event        cannot be executed Img.style.display = ' None '  //hide the picture  return {' width ': img.width, ' height ': img.height}} foo (). Then ( val) = = The   value returned by the return statement inside the {//async function, which becomes the argument of the then method callback function. So Val here is the value returned by the return statement above Console.log (val)  //{' width ': img.width, ' height ': img.height} })

　　

　　

Get picture width and height when uploading images