js实现图片压缩

最新推荐文章于 2024-04-28 18:18:11 发布

不染心

最新推荐文章于 2024-04-28 18:18:11 发布

阅读量534

点赞数

分类专栏： jQuery 文章标签： js 图片压缩

本文链接：https://blog.csdn.net/qq_38234785/article/details/77520040

版权

jQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="UTF-8">
		<title>商品发布</title>
		<script>
			 var image = '';
			 var base64="";
			 function selectImage(file){
				    if(!file.files || !file.files[0]){
				    	return;
					}
				    var reader = new FileReader();
					 reader.onload = function(evt){
					 document.getElementById('image').src = evt.target.result;
					 image = evt.target.result;
					  document.getElementById('image').οnlοad=function(){
					  	if(file.files[0].size>100000){//当图片的大小大于100k的时候进行压缩
					  		alert("图片过大"+"大小为："+file.files[0].size+"，自行裁剪50KB");
					  		var h=document.getElementById('image').naturalHeight;
						  	var w=document.getElementById('image').naturalWidth;
						  	canvas = document.createElement("canvas");
							ctx = canvas.getContext('2d');
							var c=50000/file.files[0].size; 
							/*c是压缩比率*/
							alert(c);
							canvas.width = w*c;
	                        canvas.height = h*c;
	                        ctx.drawImage(document.getElementById('image'), 0, 0, canvas.width, canvas.height);//alert(h+" "+w);
	                        //fileUpload();
	                         var quality = 1;
	                        base64 = canvas.toDataURL('image/jpeg', quality );
	                        alert(base64);
	                        document.getElementById("image2").src=base64;
	                        
					  	}/*如果图片过大就压缩*/
					  	
					  }
					}
				reader.readAsDataURL(file.files[0]);
			}
			 function uploadImage(){
				var city = document.getElementById("product-class");    
				
				$.ajax({
					 type:'POST',
					 url: 'http://47.93.97.159/anuweb/servlet/putproduct', 
					 data: {image: base64,sno:$("#product-sno").val(),qq:$("#product-qq").val(),name:$("#product-name").val(),message:$("#product-m").val(),pclass:city.options[city.selectedIndex].innerText},
					 async: false,
					 dataType: 'json',
					 success: function(data){
					if(data.success){		
					   alert('上传成功');	
					}else{
					   alert('上传失败');
					}
					},
					error: function(err){
					//alert('网络故障');
					}
				});/*上传商品信息*/
				/*跳转回去*/
				$("#body").load("myself.html");
				alert("发布成功！");
			/*跳转回去*/
			}	
			
			
			$(function(){
				/*设置商品图片*/
				$("#product-pic img").click(function(){
					$("#product-pic input").click();
				})/*设置商品图片*/
			})
		</script>
	</head>
	<body>
		<ul id="product-message">
			<li>
				<h4>商品图片：</h4>
				<div id="product-pic">
					 <img id="image"src="img/product-message.png" />
					 <input type="file" οnchange="selectImage(this);" style="display: none;"/>
					 <img id="image2"/>
				</div>
			</li>
			<li class="text-center">
			    <button class="btn btn-primary" οnclick="uploadImage();">提    交</button>
			</li>
		</ul>
	</body>
</html>

不染心

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现图片压缩

商品发布 var image = ''; var base64=""; function selectImage(file){ if(!file.files || !file.files[0]){ return; } var reader = new FileReader(); reader.on
复制链接

扫一扫