图片上传预处理（剪裁压缩）
基于bootstrap的fileinput.js上传图片插件，在上传前进行图片的剪裁压缩，对图片大小及宽高不做限制，方便用户上传图片。
写入代码前需要引入jquery.js及fileinput.js
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl,initImage,picId) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : ['jpg','png'],//接收的文件后缀
maxFileCount:1,
//maxFileSize : 200,//上传文件最大的尺寸
enctype: 'multipart/form-data',
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
dropZoneTitle: "上传图片375 * 180分辨率效果更好,长宽比2:1左右",
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "",
initialPreviewAsData: true,
initialPreviewFileType: 'image',
minImageWidth:700,
maxImageWidth: 10,//图片的最大宽度
initialPreview: [ //预览图片的设置 初始化加载
'
'
]
});
var canBeUpload = true;
control.click(function(){
$("#"+picId).val("");
});
control.on("filebatchselected", function(event, files) {
if (files && files.length > 0) {
var file = files[0];
console.log(file)
resizeImage(file).then(function (result) {
return typeof result === 'string' ? convertToBlob(result, file.type) : result;
}).then(function (blob) {
// 构建FormData
console.log(blob)
var formData = new FormData();
//注意：此处第3个参数最好传入一个带后缀名的文件名，否则很有可能被后台认为不是有效的图片文件
formData.append("file", blob, file.name);
// 上传文件
$.ajax({
url: uploadUrl,
method: "POST",
data: formData,
cache: false,
processData: false,
contentType: false,
success:function(data){
console.log(data)
if(true == true){
$("#"+picId).val(data.fileName);
$.jBox.tip('处理成功' ,"success",{persistent:true,opacity:0});
}
}
})
});
}
//console.log($("#x"+picId),event,files)
canBeUpload = false;
$(this).fileinput("upload")
});
control.on("filepreupload", function(event, data) {
//console.log($(".file-input"))
// console.log(data.response.name);
});
// 异步上传错误结果处理
control.on('fileerror', function(event, data, msg) {
alert('上传错误');
});
// 同步上传错误结果处理
control.on('filebatchuploaderror', function(event, data, msg) {
alert('filebatchuploaderror上传错误');
});
// 点击浏览框右上角X 清空文件后响应事件
control.on("filecleared",function(event, data, msg){
// 在预览框中图片已经完全加载完毕后回调的事件
control.on("fileimageuploaded",function(event, data, msg){
});
}
图片压缩剪裁部分js
function resizeImage(file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.onload = function () {
var img = new Image();
img.onload = function () {
var w = this.naturalWidth;
var h = this.naturalHeight;
var maxW = 750;
var maxH = 750;
// 如果图片尺寸小于最大限制，则不压缩直接上传
if (w <= maxW && h <= maxH) {
resolve(file);
return;
}
var level = 0.6;
var multiple = Math.max(w / maxW, h / maxH);
var resizeW = w / multiple;
var resizeH = h / multiple;
var canvas = document.createElement("canvas");
canvas.width = resizeW;
canvas.height = resizeH;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, resizeW, resizeH);
var base64Img = canvas.toDataURL(file.type, level);
var arr = base64Img.split(",");
resolve(arr[1]);
};
img.src = this.result;
};
reader.readAsDataURL(file);
});
}
/**
* 将图片的base64字符串转换为Blob对象
*/
function convertToBlob(base64Str, fileType) {
var base64 = window.atob(base64Str);
var len = base64.length;
var buff = new ArrayBuffer(len);
var uarr = new Uint8Array(buff);
for (var i = 0; i < len; i++) {
uarr[i] = base64.charCodeAt(i);
}
var blob = null;
try {
blob = new Blob([buff], { type: fileType });
} catch (e) {
var BlobBuilder = window.BlobBuilder = (
window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder
);
if (e.name === "TypeError" && BlobBuilder) {
var builder = new BlobBuilder();
builder.append(buff);
blob = builder.getBlob(fileType);
}
}
return blob;
}
接下来只需要初始化控件就可以了，initFileInput(ctrlName, uploadUrl,initImage,picId)参数对应，上传的input的id-上传图片的地址-未上传前默认图-对应用来显示图片的img的id
你可能感兴趣的:(图片上传预处理（剪裁压缩）)