JavaScript Web语言

【JavaScript】用原生js实现图片上传效果，如何限制图片的宽高？

2021-01-27 10:12发布

站内问答 / Web前端
2541 5 5
发送
5条回答
aijingda
1楼 · 2021-01-27 11:09.采纳回答

先说下要实现什么功能，比如：限制图片大小不能超过30K，宽高为121x75

上面需求提了，然后我直接把代码给你放出来，可以照着下面代码敲一遍试试就知道怎么限制图片宽高了




 
 

 

$("#picFile4").on("change",function(){
   var imgFile = this.files[0];
   var size = imgFile.size/1024;
   if(size > 30){
    layer.alert("图片超过30K");
    return false;
   }
   var fr = new FileReader();
   fr.onload = function(e) {
    var data = e.target.result;
   //加载图片获取图片真实宽度和高度
   var image = new Image();
   image.onload=function(){
   var width = image.width;
   var height = image.height;
   if( width != 121 || height != 75){
           layer.alert("图片尺寸不对，格式为(121 x 75)");
           return false;
   }else{
           var imgs = document.getElementsByClassName('updateimg4');
      imgs[imgs.length-1].src = fr.result;
      fengWu.uploadPic("pic04");
   }
   };
   image.src= data
   };
   fr.readAsDataURL(imgFile);
  })


我是大脸猫
2楼 · 2021-01-27 13:55

按比例缩小图片宽高的具体代码，供大家参考，具体内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
 <title>JS 按比例缩小图片宽高title>
head>
  
<body>
 <div>
 <input type="file" name="" id="upload">
 <img src="" alt="" id="preview">
 div>
body>
<script>
 var upd =document.getElementById('upload');
 upd.addEventListener('change',function(e){
 var file=e.target.files[0];
 var reader=new FileReader();
 var img = document.createElement('img');
 var canvas=document.createElement('canvas');
 var context=canvas.getContext('2d');
  
 reader.onload=function(e){
 img.src = e.target.result;
 img.onload = function () {
 var imgWidth=this.width;//上传图片的宽
 var imgHeight = this.height;//上传图片的高
 //按比例缩放后图片宽高
 var targetWidth = imgWidth;
 var targetHeight = imgHeight;
 var maxWidth=1920;//图片最大宽
 var maxHeight = 1080;//图片最大高
 var scale = imgWidth / imgHeight;//原图宽高比例
  
 //如果原图宽大于最大宽度
 if(imgWidth>maxWidth){
 targetWidth = maxWidth;
 targetHeight = targetWidth/scale;
 }
 //缩放后高度仍然大于最大高度继续按比例缩小
 if(targetHeight>maxHeight){
 targetHeight = maxHeight
 targetWidth = targetHeight*scale;
 }
 canvas.width=targetWidth;//canvas的宽=图片的宽
 canvas.height=targetHeight;//canvas的高=图片的高
  
 context.clearRect(0,0,targetWidth,targetHeight)//清理canvas
 context.drawImage(img,0,0,targetWidth,targetHeight)//canvas绘图
 var newUrl=canvas.toDataURL('image',0.92);//canvas导出成为base64
 preview.src=newUrl
 }
 }
 reader.readAsDataURL(file);
 })
script>
  
html>

小编再为大家分享一段：图片按宽高比例进行自动缩放代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
 * 图片按宽高比例进行自动缩放
 * @param ImgObj
 * 缩放图片源对象
 * @param maxWidth
 * 允许缩放的最大宽度
 * @param maxHeight
 * 允许缩放的最大高度
 * @usage
 * 调用：
 */
function DrawImage(ImgObj, maxWidth, maxHeight){
 var image = new Image();
 //原图片原始地址（用于获取原图片的真实宽高，当标签指定了宽、高时不受影响）< class style="line-height: 17.6px; color: rgb(159, 184, 204); margin: 0px !important; padding: 0px 1em !important; outline: 0px !important; word-break: break-all !important; border-radius: 0px !important; background: none rgb(252, 252, 252) !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-size: 1em !important; min-height: auto !important; white-space: pre !important;"> image.src = ImgObj.src;
 // 用于设定图片的宽度和高度
 var tempWidth;
 var tempHeight;
  
 if(image.width > 0 && image.height > 0){
 //原图片宽高比例 大于 指定的宽高比例，这就说明了原图片的宽度必然 > 高度
 if (image.width/image.height >= maxWidth/maxHeight) {
  if (image.width > maxWidth) {
  tempWidth = maxWidth;
  // 按原图片的比例进行缩放
  tempHeight = (image.height * maxWidth) / image.width;
  } else {
  // 按原图片的大小进行缩放
  tempWidth = image.width;
  tempHeight = image.height;
  }
 } else {// 原图片的高度必然 > 宽度
  if (image.height > maxHeight) {
  tempHeight = maxHeight;
  // 按原图片的比例进行缩放
  tempWidth = (image.width * maxHeight) / image.height;
  } else {
  // 按原图片的大小进行缩放
  tempWidth = image.width;
  tempHeight = image.height;
  }
 }
 // 设置页面图片的宽和高
 ImgObj.height = tempHeight;
 ImgObj.width = tempWidth;
 // 提示图片的原来大小
 ImgObj.alt = image.width + "×" + image.height;
 }
}


芒果
3楼 · 2021-01-27 13:58

$("#pic").change(function() {

    var f = document.getElementById("pic").value;

    if (f == "") {

        alert("请上传图片");

        return false;

    } else {

        if (!/\.(jpg|JPG)$/.test(f)) {

            alert("图片类型必须是jpg格式"); 

            $("#pic").val("");

            return false;

        }

        if(pic.width!=750||pic.height!=465){

            alert("*提示：文件大小不对。您只能上传750*465尺寸的图片");

            $("#pic").val("");

            return false;

        }
    }
});

可口可乐
4楼 · 2021-01-27 17:41

当页面中图片非常多，且要求每张图片的大小依据其父器固定怎么办？可以使用max-weight：

img {max-weight:100%;}

相关问题推荐

  • js如何给每个数组内的元素后面添加新的字段JavaScript 2021-12-08 11:22
    回答 8

    向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...

  • 这段JS代码为什么输出[1,2,3,4]而不是[1JavaScript 2021-12-03 15:00
    回答 2

    我觉得getTopWindow(） 应该是他自己写的函数 mask  应该是getTopWindow(）函数中 return 出的一个什么玩意show()  jQuery的显示

  • js 怎样对比两个数组？并且将不一样的数据提取出来JavaScript 2021-11-24 14:33
    回答 9

    如图所示

  • JavaScript 原型，原型链 ? 有什么特点JavaScript 编程语言 2021-11-10 16:42
    回答 12

    1、原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链...

  • 怎么在vscode中调试js代码JavaScript 2021-04-27 09:44
    回答 6

    使用VS code对JS进行Debug，需要安装一个插件，这个插件是根据你所使用的浏览器来的，不同浏览器对应插件不同，以下是插件对应情况，下载完相应的插件以后还要下载一个live server在浏览器下查看你界面运行效果，记得在到设置里修改下live server的端口号，然...

  • 没有基础学习java可以跟上嘛JavaScript 2021-04-19 08:57
    回答 8
    已采纳

    没有基础，是可以学Java的，在网上也能找到很多免费的视频、学习资料等资源，只不过想要光靠自己摸索学透Java并不容易，最好是找一个比较靠谱的有实训的培训机构。不过，我给你点建议：1.脑子里要有编程思维，2.学习态度要有，3.了解了基本概念后，从图形界面...

  • 如何通过javascript向文档中输出文本JavaScript 2021-04-02 09:53
    回答 7

    假设文本框的id=text1js:document.getElementById(text1).value = 测试;//即可

  • load和DOMContentLoaded的区别Web语言 JavaScript 2021-02-01 10:22
    回答 2

    这两个事件都是在js原生开发时经常会用到的，比如需要对页面dom进行动态处理，这时就需要用到DOMContentLoaded和[removed]事件，大家都知道，就是在dom构建完毕后，才可以对dom元素进行操作，否则会获取不到相应的dom元素，但是DOMContentLoaded和[removed]还...

  • web学习之后现在的就业形势Web语言 2021-12-07 14:38
    回答 24

    1、Web前端人才需求量大据国内第三方数据统计，未来五年我国信息化人才总需求高达1500万-2000万人。其中网络工程UI设计Web前端等人才的缺口最为突出，所以2020年Web前端的市场需求很大。更有甚者目前不仅大型互联网公司相继成立了专属的Web前端部门，中小型公...

  • elementUI table中怎么让表格生成时，Web语言 2021-11-24 14:32
    回答 6

    可以在后台返回数据之后调用table的toggleRowSelection方法来实现默认勾选

  • 为什么vs code中特殊字符不能高亮Web语言 编程语言 2021-11-18 19:11
    回答 13

    一个HTML文件，如果超过了500行，则HTML代码会自动保护，自动保护就不会全部显示HTML代码的颜色HTML代码不高亮，点击右下角切换语言为XML，即HTML代码部分高亮，带颜色再切换为HTML，则CSS和javascript部分高亮，带颜色显示代码...

  • 前端开发的前景怎么样？Web语言 2021-03-18 11:19
    回答 16
    已采纳

    1、行业发展好从我们身边的方方面面考虑，互联网行业无疑是现在发展前景最好的行业之一。WEB前端作为互联网+时代，用户体验为王的掌控者，同时单页面应用、数据可视化等这些都是通过前端开发者提高用户体验的方式。所以待遇是水涨船高的。2、人才需求大互联网...

  • cookie，localStorage，sessiWeb语言 JavaScript 2021-02-01 09:28
    回答 11

    基本概念CookieCookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到记住密码，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStor...

  • jq中，extend实现插件拓展的原理是什么？这个Web语言 JQuery 2021-01-29 16:38
    回答 4

    下面我们要在这个对象上挂载一个extend方法，用于让开发者为我这个对象添加功能和方法。12345var $ = {   extend:function(ob){      /**暂时不管里面写什么**/   }  }现在，我们就在$这个对象上添加了一个extend方法，外部可以通过$.extend(obj...

  • 在vscode调试ajax的过程中，如何将httpWeb语言 JavaScript 2021-01-29 16:37
    回答 2

    在vscode 头疼的问题是 用浏览器查看网页！会是以文件夹的方式打开的！  我遇到这个问题 我还重新配置了Apache    ！ 但是现在可以解决：使用vscode  ==================== 打开cmd   : 在cmd 控制台中输入  ：   1.运行cnpm install live-server...

没有解决我的问题，去提问