问题描述
项目中有这样一个需求,就是从后台返回了一个图片的链接,然后前端要将这个图片叠加到地图上。在实现这个需求的时候,需要获取到不同图片的尺寸大小,关于图片的尺寸大小后台是没有返回的,只有通过前端去获取,下面介绍下如何获取。
解决方法
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、如上就是全部过程了。