前端修改input上传的图片大小

我的本意是压缩图片的质量，一不小心写成了修改图片的宽高；

1、HTML部分代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title></head><body><div><input type="file" name="" id="upload_img"><img src="" alt="" id="upload_img_preview"></div>
</body>
<script></script>
<script src="js/a.js"></script>
</html>

2、js部分代码：

在这里面用到了图片加载（img.onload）,fileReader接口读取文件，canvas画图技术，

首先，给input添加监听事件，

var ipt =document.getElementById('upload_img');
ipt.addEventListener('change',function(e){var file=e.target.files[0];})

在input上传图片的时候用filereader函数读取图片

在input的chang函数里面调用readAsDataURL；

reader.readAsDataURL(file);

要先全局声明一个reader=new FileReader();

在reader.readAsDataURL(file);调用完成的时候会调用onload接口：

当文件读取成功，返回一个去调用img.onload事件；

调用之前先全局声明一个img =new Image();和canvas=document.createElement('create');context=canvas.getContext('2d');

在img.onload里面判断这个图片的大小和所需图片的大小，然后绘制到canvas上面，最后将canvas导出成为base64图片呈现到页面上面；

img.onload = function () {var imgWidth=this.width//上传图片的宽imgHeight = this.width,//上传图片的高maxWidth=1024,//图片最大宽maxHeight = 1024,//图片最大高targetWidth=imgWidth,//最后图片的宽targetHeight=imgHeight//最后图片的高// 如果图片的宽或者高大于图片的最大宽高if(imgWidth>maxWidth||imgHeight>maxHeight){// 宽大于高if(imgWidth/imgHeight>maxWidth/maxHeight){targetWidth=maxWidth;targetHeight=Math.round(maxWidth*(imgWidth/imgHeight))}// 款小于高else{targetHeight=maxHeight;targetWidth=Math.round(maxHeight*(imgHeight/imgWidth));}}canvas.width=targetWidth;//canvas的宽=图片的宽canvas.height=targetHeight;//canvas的高=图片的高context.clearRect(0,0,targetWidth,targetHeight)//清理canvascontext.drawImage(img,0,0,targetWidth,targetHeight)//canvas绘图var newUrl=canvas.toDataURL('image',0.92);//canvas导出成为base64upload_img_preview.src=newUrl
}

前端修改input上传的图片大小相关推荐

python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
如何修改Kestrel上传文件的大小
作为.NET程序员我们都清楚如何修改.NET Web程序上传文件的大小,但是我最近在做.NET Core 项目的时候发现我不清楚如何修改Kestrel上传文件的大小,经过翻阅微软官方文档我成功实现了修 ...
前端-vue-文件上传（图片、word，ppt，pdf，excel，txt等文件流）
1. 文件上传(图片.word,ppt,pdf,excel,txt等文件流) 总结一下上传组件的思路 input标签的@change事件通过input标签的@change事件的绑定,进行文件的选择上 ...
JS实现限制input上传文件的大小和格式
场景在实现Excel导入数时,需要上传excel格式的文件. 在前端js进行判断,限制上传文件的大小和格式. 实现 html页面代码可以通过accept属性来筛选打开文件的格式. <form ...
php上传文件大小读取,怎么修改php上传文件的大小限制？
修改php上传文件大小限制的方法:首先打开php.ini配置文件:然后分别查找并修改"post_max_size"项."upload_max_filesize" ...
input做图片上传限制图片大小1M以内
input 属性type=file;定义输入字段和 "浏览"按钮,供文件上传. 1.做图片上传可配合中使用 accept 属性来限制图片的格式. 注意 accept 属性只能与配 ...
cropper.js插件做图片上传裁剪图片大小
前端代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="U ...
控制附件的大小 php,wordpress如何修改默认上传附件限制大小
关于上传文件大小的限制,有很多有几种情况,一是服务器上的限制(php.ini)php虚拟主机空间提供商为了保障服务器稳定.都会限制大容量附件上传,在php.ini文件中做了限制,二是网站程序本身都会有 ...

前端修改input上传的图片大小

前端修改input上传的图片大小相关推荐

最新文章

热门文章