function Uploadimg (btn,imgcont,btntag,hiddenbox,popbox,cutbtn) {
var input = document.getElementById (BTN);
var Img_area = document.getElementById (Imgcont);
if (typeof (filereader) = = = ' undefined ') {
DialogBox (' Your browser does not support FileReader properties, please change to a major browser ');
Input.setattribute (' disabled ', ' disabled ');
} else {
$ (input). On (' Change ', btntag,function () {
var file = This.files[0];
ReadFile (file);
})
}
var image = new Image ();
function Setimageurl (URL) {
image.src = URL;
}
function ReadFile (file) {
if (!/image\/\w+/.test (File.type)) {
DialogBox ("Make sure the file is of image type");
return false;
}
var reader = new FileReader ();
Reader.readasdataurl (file);
Reader.onload = function (e) {
var carousel = This.result;
var _html = "$ (PopBox). FadeIn ();
$ (PopBox). Find ('. Img-box '). HTML (_html);
var option = {};
$ ('. Imgone '). Cropper ({
ASPECTRATIO:16/9,
Crop:function (e) {
option.x = e.x;
OPTION.Y = e.y;
Option.width = E.width;
Option.height = E.height;
}
});
$ (CUTBTN). On (' click ', function () {
Setimageurl (carousel);
var width = option.width;
var height = option.height;
var canvas=$ (' <canvas width= ' ' +width+ ' "height=" ' +height+ ' "></canvas> ') [0],
Ctx=canvas.getcontext (' 2d ');
Ctx.drawimage (Image,option.x,option.y,width,height,0,0,width,height);
var baseUrl = Canvas.todataurl ();
$.ajax ({
URL: '/mid/loan/multiupload ',
DataType: ' JSON ',
Type: ' POST ',
data:{' folder ': ' loan_img ', ' cutimg ': BaseUrl},
Success:function (res) {
if (Res.code = = 1) {
"/uploads" +res.data
$ (Img_area). FIND (' img '). attr (' src ', baseUrl);
$ (Hiddenbox). Val (Res.data);
}else{
DialogBox (RES.MSG);
}
}
})
$ (PopBox). FadeOut ();
})
}
}
}
Multi-image upload cropping