利用canvas 压缩图片,传递到 服务器
1.取到file文件。
2.将图片压缩
function processfile(file) { var reader = new FileReader(); reader.onload = function (event) { var blob = new Blob([event.target.result]); window.URL = window.URL || window.webkitURL; var blobURL = window.URL.createObjectURL(blob); var image = new Image(); image.src = blobURL; image.onload = function() { var dataUrl= canvasImg(image);//利用画布将文件转换为 返回的是一串Base64编码的URL uploadFile(resized);//删除服务器 } }; reader.readAsArrayBuffer(file); } function canvasImg(img) { //压缩的大小 var max_width =500; var max_height =500; var canvas = document.createElement('canvas'); var width = img.width; var height = img.height; if(width > height) { if(width > max_width) { height = Math.round(height *= max_width / width); width = max_width; } } else{ if(height > max_height) { width = Math.round(width *= max_height / height); height = max_height; } } canvas.width = width; canvas.height = height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); //压缩率 return canvas.toDataURL("image/jpeg",0.9); }
3.上传到服务器
//将dataUrl转换为二进制流
function dataUrlToBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } function uploadFile(dataUrl){ var file = dataUrlToBlob(dataUrl);//转换为流 var fd = new FormData();//formdata格式上传服务器 fd.append("file",file); $.ajax({ type: 'POST', url: "url", data: fd, processData: false, async: true, contentType: false, dataType: 'json', success: function (data) { } }); }