利用JavaScript实现图片按比例缩小宽高-创新互联

这期内容当中小编将会给大家带来有关利用JavaScript实现图片按比例缩小宽高，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

站在用户的角度思考问题，与客户深入沟通，找到柳河网站设计与柳河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖柳河地区。

具体内容如下

<!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>

上一篇：松下npm贴片机参数怎么安装npm？-创新互联

下一篇：CSS中常用中文字体转unicode编码有哪些-创新互联