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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 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
用Zend Encode编写开发PHP程序
2010/02/21 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
创建与框架无关的JavaScript插件
2020/12/01 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
舞蹈比赛获奖感言
2014/02/04 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
公司总经理任命书
2014/06/05 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
SQL Server删除表中的重复数据
2022/05/25 SQL Server