JS实现按比例缩小图片宽高


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了JS实现按比例缩小图片宽高的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<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>

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

/**
 * 图片按宽高比例进行自动缩放
 * @param ImgObj
 * 缩放图片源对象
 * @param maxWidth
 * 允许缩放的最大宽度
 * @param maxHeight
 * 允许缩放的最大高度
 * @usage 
 * 调用:<img src="图片" onload="javascript:DrawImage(this,100,100)">
 */
function DrawImage(ImgObj, maxWidth, maxHeight){
 var image = new Image();
 //原图片原始地址(用于获取原图片的真实宽高,当<img>标签指定了宽、高时不受影响)
 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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
jQuery Clone Bug解决代码
Dec 22 Javascript
javascript 常见功能汇总
Jun 11 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
JS实现简易贪吃蛇游戏
Aug 24 #Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 #Javascript
Node.js 中判断一个文件是否存在
Aug 24 #Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 #Javascript
在Vue中使用HOC模式的实现
Aug 23 #Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 #Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 #Javascript
You might like
php格式化金额函数分享
2015/02/02 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
用javascript实现画板的代码
2007/09/05 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
js函数返回多个返回值的示例代码
2013/11/05 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
python实现textrank关键词提取
2018/06/22 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
SQL Server面试题
2016/10/17 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
骨干教师培训感言
2014/01/16 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
促销活动总结范文
2014/04/30 职场文书
市场营销毕业求职信
2014/08/07 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
家长意见书
2015/06/04 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL