Rank: Member
Groups:
Joined: 4/12/2016(UTC)
Posts: 12
Was thanked: 3 time(s) in 3 post(s)
|
This request is a bit more challenging. The uploader does not have an appropriate event to change the cropBounds per each converter. However, the workaround still exists. The idea is to keep the file list and upload files three times - first time you upload files with the first convertor (and apply the proper crop bounds), then restore the file list and set the second convertor settings. Upload files with new convertor settings again, and repeat the same for the third convertor. Here is the updated example (only the event handler code changed). Also you can download it like a text file  formatted-code2.txt (6kb) downloaded 6 time(s). Code:
converters: [
{ mode: '*=Thumbnail', thumbnailFitMode: 'Fit', thumbnailWidth: 1280, thumbnailHeight: 960, thumbnailBgColor:0xffffff},
{ mode: '*=Thumbnail', thumbnailFitMode: 'Fit', thumbnailWidth: 720, thumbnailHeight: 540, thumbnailBgColor:0xffffff},
{ mode: '*=Thumbnail', thumbnailFitMode: 'Fit', thumbnailWidth: 336, thumbnailHeight: 252, thumbnailBgColor:0xffffff}
],
events: {
initComplete: function() {
this.converterIndex = 0;
},
beforeUpload:function(){
if(this.converterIndex == 0){
this.fileList = [];
this.convertersList = [];
for (var i = 0; i < this.files().count(); i++){
this.fileList.push(this.files().get(i).file());
}
for (var i = 0; i < this.converters().count(); i++){
var conv = this.converters().get(i);
var data = {
mode: conv.mode(),
thumbnailFitMode: conv.thumbnailFitMode(),
thumbnailWidth: conv.thumbnailWidth(),
thumbnailHeight: conv.thumbnailHeight(),
thumbnailBgColor: conv.thumbnailBgColor()
};
this.convertersList.push(data);
}
}
},
afterUpload:function(){
console.log("converter["+ this.converterIndex +"] is uploaded");
this.converterIndex++;
if(this.converterIndex <= this.convertersList.length - 1){
this.files().add(this.fileList);
window.setTimeout(function(){
this.upload();
}.bind(this),1000);
}else{
this.converters().removeAll();
for (var i = 0; i < this.convertersList.length; i++){
this.converters().add(this.convertersList[i]);
}
this.converterIndex = 0;
this.fileList = [];
this.convertersList = [];
}
},
beforePackageUpload:function(){
this.converters().removeAll();
this.converters().add(this.convertersList[this.converterIndex]);
var item = this.files().get(0);
var converter = this.converters().get(0);
var imageDim = {width: item.width(), height: item.height()};
var thumbDim = {width: +converter.thumbnailWidth(), height: +converter.thumbnailHeight() ,color: "#" + converter.thumbnailBgColor().toString(16)};
//future size of thumbnail, without white borders
var fitSize = getThumbnailSize(item.width(), item.height(), thumbDim.width, thumbDim.height, 0, "fit");
var thumbnailAspectRatio = thumbDim.width > thumbDim.height ? thumbDim.width/thumbDim.height : thumbDim.height/thumbDim.width;
var aspectedImageBounds = null;
if(imageDim.width < thumbDim.width && imageDim.height < thumbDim.height){
aspectedImageBounds = thumbDim;
}else{
aspectedImageBounds = applyAspectRatio(imageDim, thumbnailAspectRatio, imageDim.height<imageDim.width);
}
var angle = normalizeAngle(item.angle(), 360);
if (angle == 90 || angle == 270) {
var tmp = imageDim.width;
imageDim.width = imageDim.height;
imageDim.height = tmp;
}
var cropBounds = [(imageDim.width-aspectedImageBounds.width)/2,(imageDim.height-aspectedImageBounds.height)/2,aspectedImageBounds.width, aspectedImageBounds.height];
item.cropBounds(cropBounds);
console.log("image size: " + imageDim.width + "x" + imageDim.height);
console.log("thumbnail size: " + fitSize.width + "x" + fitSize.height);
console.log("thumbnail size with fill color("+ thumbDim.color +"): " + thumbDim.width + "x" + thumbDim.height);
}
}
Edited by user Wednesday, May 31, 2017 4:06:33 AM(UTC)
| Reason: Not specified
|
 1 user thanked Alex Nikulin for this useful post.
|
|