Foxtable(狐表)用户栏目专家坐堂 → js增加判断照片宽度


  共有1994人关注过本帖树形打印复制链接

主题:js增加判断照片宽度

帅哥哟,离线,有人找我吗?
有点甜
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/1/5 10:34:00 [显示全部帖子]

测试了一下,无法在选择文件结束以后读取文件信息的,只能在选择文件的时候读取。

 

所以无法在最后提交的时候读取图片宽高,必须在选择文件的时候,就处理,或者保存宽高信息。

 

修改weui.me.js 的 previewFile3 函数

 

function previewFile3(){
 var images=[];
 var glr=document.getElementById(this.id+'_gallery');
 var thumbs = document.getElementById(this.id +"_thumbnails");
 if (glr.attributes["data-images"].value){
  images=glr.attributes["data-images"].value.split("|");
 }
 if (!this.nextindex){this.nextindex=0;}
 var upd = this;
 for(var i=0;i<this.files.length;i++){
  var Files = this.Files;
  var reader = new FileReader();
  var ext = this.files[i].name;
  ext = ext.substring(ext.lastIndexOf(".")+1).toLowerCase();
  reader.Extension = ext;
  reader.FileName = this.files[i].name;
  switch(ext){
   case "jpg": case "jpeg":case "png":case "gif":case "bmp":case "wmf":
    reader.onload=function(e){
     var img= new Image();
     var red = e.target;
     img.onload= function(g){
alert(img.width)
alert(img.height)

      var w=-1, h=-1;
      if (upd.hasAttribute("data-scalewidth")){w = upd.attributes["data-scalewidth"].value;}
      if (upd.hasAttribute("data-scaleheight")){h = upd.attributes["data-scaleheight"].value;}
      if(w>0 && h<=0){h=w/img.width * img.height;}
      else if(w<=0 && h >0){w=h/img.height * img.width;}
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
                  canvas.width = w;
      canvas.height = h;
      ctx.drawImage(img, 0, 0, w, h);
      if(red.Extension == 'jpg' || red.Extension == 'jpeg'){var base64Data = canvas.toDataURL('image/jpeg');}
      else{var base64Data = canvas.toDataURL('image/png');}
      var nid =upd.id + "_thumb_" + upd.nextindex.toString()
      thumbs.insertAdjacentHTML("beforeEnd","<li data-gid='"+ upd.id + "_gallery'" +
      " data-image='" + nid + "'" + " id='" + nid + "'" +
      " class='weui_uploader_file' temp style='background-image:url(" + base64Data + ")'></li>"); 
      images[images.length]="'"+ nid +"'";
      glr.attributes["data-images"].value=images.join('|');
      upd.nextindex = upd.nextindex +1;
      Files[Files.length] = {blobFile:red.FileName,data:base64toBlob(base64Data)};
     }
     img.src = e.target.result; 
    }
    reader.readAsDataURL(this.files[i]);
    break;
   default:
    this.Files[this.Files.length]=this.files[i]; 
  }
 }
 this.value=""
}


 回到顶部
帅哥哟,离线,有人找我吗?
有点甜
  2楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/1/5 11:35:00 [显示全部帖子]

参考代码

 

alert(img.width)
alert(img.height)
if(img.width < 400) {
    alert("分辨率太小");
    return;
}
if(img.width<img.height || img.height>2.5*img.width) {
    alert("有错误");
    return;
}


 回到顶部
帅哥哟,离线,有人找我吗?
有点甜
  3楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:版主 帖子:85326 积分:427815 威望:0 精华:5 注册:2012/10/18 22:13:00
  发帖心情 Post By:2018/11/25 17:47:00 [显示全部帖子]

比如

 

alert(glr.id)

alert(upd.id)


 回到顶部