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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
通过百度地图获取公交线路的站点坐标的js代码
May 11 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 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
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
php curl 上传文件代码实例
2015/04/27 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
python reverse反转部分数组的实例
2018/12/13 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python多线程与多进程及其区别详解
2019/08/08 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
民族精神月活动总结
2014/08/28 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android
php实例化对象的实例方法
2021/11/17 PHP
德劲DE1105机评
2022/04/05 无线电