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

news/2024/11/16 17:40:39/

问题描述

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

 

解决方法

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、如上就是全部过程了。


http://www.ppmy.cn/news/788609.html

相关文章

小程序选择图片,获取图片临时地址

学习目标: 小程序选择图片,获取图片临时地址 学习内容: wx.chooseImage({count: 2, // 最多可以选择的图片数量,默认9sizeType: [original, compressed], // original原图,compressed 压缩图,默认皆有sour…

js获取html图片路径正则表达式,js获取图片的路径及文件名

假如网页中有一图片,那么如何得知该图片的路径及图片名称呢?请使用下面的JS代码来解决你的问题。 一、图片信息 var imgnew Image(); img.id"MyImg"; img.src"MyCamera.png"; 二、获取图片信息 ①获取图片的完整路径 alert(img.src)…

根据网络图片地址获取资源的字节流

/*** 根据地址获得数据的字节流* param strUrl 网络连接地址* return*/ private static byte[] getImageFromNetByUrl(String strUrl){try {URL url new URL(strUrl);HttpURLConnection conn (HttpURLConnection)url.openConnection();conn.setRequestMethod("GET"…

图片url地址的生成获取方法

在写博客插入图片时,许多时候需要提供图片的url地址。作为菜鸡的我,自然是一脸懵逼。那么什么是所谓的url地址呢?又该如何获取图片的url地址呢? 首先来看一下度娘对url地址的解释:url是统一资源定位符,对可…

GoLang网络编程:HTTP服务端之底层原理与源码分析——http.HandleFunc()、http.ListenAndServe()

一、启动 http 服务 import ("net/http" ) func main() {http.HandleFunc("/ping", func(w http.ResponseWriter, r *http.Request) {w.Write([]byte("ping...ping..."))})http.ListenAndServe(":8999", nil) }在 Golang只需要几行代…

IOS BUG 处理UIControl触摸事件TrackingWithEvent

IOS BUG记录 之 处理UIControl的点击事件。UIControl的触摸事件的方法是beginTrackingWithTouch:withEvent:,continueTrackingWithTouch:withEvent:,endTrackingWithTouch:withEvent:,cancelTrackingWithEvent: ##下面简单的介绍一下 begin…

rufus 制作U盘启动工具

之前使用ultraiso在服务器上安装系统,发现很多ubuntu版本安装都提示There was a problem reading data from the CD-ROM. Please make sure it is in the drive. If retrying does not work, you should check the integrity of your CD-ROM.,其实是ultr…

UltraISO+U盘制作启动盘安装各种系统

现在装系统的方式多种多样,软媒、小白一键重装等等,不过我还是喜欢用U盘来做启动盘,怎么说呢,简单粗暴,有安全感。由于本人使用过的操作系统除了win10就是win7,所以就介绍一下在这两个系统上做启动盘到启动…