图片压缩上传
imgUpload: function () {
var that = this;
var eleFile = document.querySelector('#upload');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 200, maxHeight = 200;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽,按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 开始上传
let files = new window.File([blob], file.name, {type: file.type})//将blob文件转换file 文件
var formData = new FormData();
formData.append('files', files);
formData.append('uploadtype', '1');
try {
fileRequsestSer.post('../'+camEmotion.upLoad, formData).then(function (data) {
if (data.meta.success) {
that.studentInfo.headimgurl = data.data.webUrl;
that.imgUrl = data.data.webUrl
// $('#face_image').attr('src', data.data.webUrl);
} else {
alert(data.meta.message)
}
$(".headimg").val('');
}, function (data) {
$(".headimg").val('');
});
} catch (e) {
$(".headimg").val('');
that.error.errorStatus = true;
that.error.errorMsg = "上传图片失败,请稍后重试!";
deferred.reject();
}
// xhr.open("POST", 'upload.php', true);
// xhr.send(blob);
}, file.type || 'image/png');
};
// 文件base64化,以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});
},