• 图片上传时获取图片的宽和高


      经常会遇到图片上传的问题,这时候我们会传图片的地址,宽和高到服务器,至于图片上传就不说了,这里主要说图片上传时获取图片的原始宽和高的问题。

      一般而言,我们把图片上传至服务器时,服务器会返回一个上传地址给我们,这个就是我们图片的url了,但是光有这个还是不够的,因为还要将图片的宽和高传给服务器,这时候就可以这样做了。直接上代码:  

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

      然后就可以使用img.width和img.height来获取图片的宽和高了。当然仅仅这样做是不够的,因为图片上传是异步的,并不能直接使用该方法获取图片的宽和高,这样获取到的都是0.

      必须将上传的图片放置body标签里面才能去使用load事件,可以使用appendChild将img标签插入body标签里面(document.getElementsByTagName('body')[0].appendChild(img)),这样做会有一个问题,每次上传图片后页面底部都会多一张图,可以使用 display将其隐藏,然后使用onload方法,等图片加载完。 

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

      然后将要发的请求放在一个方法里面,在onload事件里面去调用方法,否则load方法外面是获取不到宽和高的。

      当然了,还有另外一种方法,就是使用ES6的办法。 

    function loadImageAsync(url) {
      return new Promise(function(resolve, reject) {
        const image = new Image();
    
        image.onload = function() {
          resolve(image);
        };
    
        image.onerror = function() {
          reject(new Error('Could not load image at ' + url));
        };
    
        image.src = url;
      });
    }
    loadImageAsync('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2546717774,3910079056&fm=200&gp=0.jpg').then(res => {
        console.log('w', res.width)
        console.log('h', res.height)
    })

      

  • 相关阅读:
    一些特效,不断更新
    关于cin输入字符串
    开辟二维数组
    c++ 有关webBrowser控件的一些整理
    WebBrowser 常用方法
    WebRequest和WebBrowser同时登陆,使用同一个sessionID
    delphi 编写的com 对象 用php调用的实例
    Two math problems in http://projecteureka.org sumitted by me.
    delphi dll 实例 与 dll窗体实例
    SSH酒店点菜系统笔记
  • 原文地址:https://www.cnblogs.com/jf-67/p/8343635.html
Copyright © 2020-2023  润新知