上传图片前将图片利用canvas进行压缩

来源：互联网发布：linux系统破解wifi密码编辑：程序博客网时间：2024/05/01 21:14

我做的是上传食谱，上传餐品图片前需要将该图的质量进行压缩

HTML代码

<input type="file" name="headpic" id="headpicinput" style="display: none;" onchange="UpLoad(this)"/><div id="" class="cell"><a href="javascript:void(0);" onclick="choosePic();"><img src="../Images/1.jpg" style="width: 100%;" id="preViewImg"/></a></div><canvas id="canvas"></canvas><input type="hidden" id="imgUrl"/>

JS代码

1.点击默认图片触发文件file（改变file的默认样式）

function choosePic() {$('#headpicinput').click();    };

2.选择文件以及获得文件url

function UpLoad(e) {var f = e.files[0];fileType = f.type;if(/image\/\w+/.test(fileType)) {var fileReader = new FileReader();fileReader.readAsDataURL(f);fileReader.onload = function(event) {var result = event.target.result; //返回的dataURL var image = new Image();image.src = result;//若图片大小大于1M，压缩后再上传，否则直接上传 if(f.size>1024*1024){                   image.onload = function() { //创建一个image对象，给canvas绘制使用var canvas = document.getElementById("canvas");   canvas.width = this.width;canvas.height = this.height; //计算等比缩小后图片宽高 var ctx = canvas.getContext('2d');ctx.drawImage(this, 0, 0, canvas.width, canvas.height);var newImageData = canvas.toDataURL(fileType, 0.8); //重新生成图片       sendData = newImageData.replace("data:"+fileType+";base64,",'');dataLength=decodeBase64(sendData).length;//base64位图片长度（这里没有写这个方法）$("#imgUrl").val(sendData);$("#preViewImg").attr("src",newImageData);$("#canvas").hide();}            }else{            image.onload = function() { //创建一个image对象，给canvas绘制使用sendData = result.replace("data:"+fileType+";base64,",'');dataLength=decodeBase64(sendData).length;$("#preViewImg").attr("src",result);$("#imgUrl").val(sendData);}            }}} else {alert("请选择图片");}}

这样就能在不改变图片宽高的情况下将图片变小。然后就点击上传后台的按钮将压缩后的图片上传到服务器了。
如果对FileReader不了解的可以访问http://blog.csdn.net/zk437092645/article/details/8745647
/*ps:这个压缩的一般是jpg格式的，上传的png格式图片可能会越压缩越大。。。。。不知道咋解决，有办法的话顺便告诉我一下，谢谢*/

0 0