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 相关文章推荐
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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获取MSN好友列表类的实现代码
2013/06/23 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
js判断是否是手机页面
2017/03/17 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
详解jQuery中的getAll()和cleanData()
2019/04/15 jQuery
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
原生JS实现留言板
2020/03/26 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
pymysql模块使用简介与示例
2020/11/17 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
Python解析微信dat文件的方法
2020/11/30 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
学生未请假就回家检讨书
2014/09/22 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis