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 相关文章推荐
js动态生成指定行数的表格
Jul 11 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP的FTP学习(三)
2006/10/09 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
js post提交调用方法
2014/02/12 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
使用python3实现操作串口详解
2019/01/01 Python
Python基础之文件读取的讲解
2019/02/16 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
活着观后感
2015/06/03 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
浅谈MySQL中的六种日志
2022/03/23 MySQL