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 风格的HTML文本转义
Jul 01 Javascript
javascript 新浪背投广告实现代码
Jul 07 Javascript
javascript 面向对象编程基础:继承
Aug 21 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
javascript制作2048游戏
Mar 30 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 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图片库imagemagick安装方法
2014/09/23 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JavaScript中的Web worker多线程API研究
2014/12/06 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python subprocess模块学习总结
2014/03/13 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Django学习之文件上传与下载
2019/10/06 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
详解使用python爬取抖音app视频(appium可以操控手机)
2021/01/26 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
低碳生活倡议书
2014/04/14 职场文书
党员群众路线承诺书
2014/05/20 职场文书
好的旅游活动方案
2014/08/19 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
倡议书的格式写法
2015/04/28 职场文书
《春酒》教学反思
2016/02/22 职场文书
门面租赁合同范文
2019/08/06 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
golang使用map实现去除重复数组
2022/04/14 Golang
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL