当前位置：网站首页>JS scale down the width and height of the picture

JS scale down the width and height of the picture

2022-06-12 10:29:00 【P P PHP】 

<!DOCTYPE html>
<html>
<head>
    <title>JS  Zoom out the width and height of the picture </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;// The width of the uploaded picture 
				var imgHeight = this.height;// Height of uploaded picture 		
				// The width and height of the picture after scaling 		
				var targetWidth = imgWidth;
				var targetHeight = imgHeight;			
				var maxWidth=1920;// The maximum width of the picture 
				var maxHeight = 1080;// Maximum picture height 				
				var scale = imgWidth / imgHeight;// The width height ratio of the original drawing 
				
				// If the original width is greater than the maximum width 
				if(imgWidth>maxWidth){
					targetWidth = maxWidth;
					targetHeight = targetWidth/scale;
				}
				// After scaling, the height is still greater than the maximum height and continues to be scaled down 
				if(targetHeight>maxHeight){
					targetHeight = maxHeight
					targetWidth = targetHeight*scale;
				}
				canvas.width=targetWidth;//canvas The width of = Picture width 
				canvas.height=targetHeight;//canvas The height of = Picture height 
				
				context.clearRect(0,0,targetWidth,targetHeight)// clear canvas
				context.drawImage(img,0,0,targetWidth,targetHeight)//canvas mapping 
				var newUrl=canvas.toDataURL('image',0.92);//canvas Export to base64
				preview.src=newUrl
			}
		}
		reader.readAsDataURL(file);
	})
</script>

</html>

 

原网站

版权声明
本文为[P P PHP]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/03/202203010524517280.html

边栏推荐

猜你喜欢

随机推荐