04 JS通过图片连接获取图片的尺寸大小

问题描述

项目中有这样一个需求，就是从后台返回了一个图片的链接，然后前端要将这个图片叠加到地图上。在实现这个需求的时候，需要获取到不同图片的尺寸大小，关于图片的尺寸大小后台是没有返回的，只有通过前端去获取，下面介绍下如何获取。

 

解决方法

1、通过查阅资料，找到了下面这种切实可行的方法。其实就是实例化一个Image对象，然后将这个对象的src属性赋值为图片链接，最后通过对象的width和height属性来获取，具体代码如下：

			//获取图片大小
            var currentImg = new Image();
            currentImg.src = "http://www.baidu.com/blog/2020011510.png";
            console.log(currentImg.width, currentImg.height);

2、通过上述这种方式获取图片的尺寸大小的时候，有时候会出现跨域的问题，那么对于这种跨域问题，我们直接配置下就好了，如下：

            //获取图片大小
            var currentImg = new Image();
            currentImg.setAttribute("crossOrigin",'Anonymous');   //配置跨域
            currentImg.src = "http://www.baidu.com/blog/2020011510.png";
            console.log(currentImg.width, currentImg.height);

3、如上就是全部过程了。