Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
steelhead  
#1 Posted : Wednesday, April 12, 2017 9:35:30 AM(UTC)
steelhead

Rank: Member

Groups: Member
Joined: 10/23/2009(UTC)
Posts: 24

Thanks: 3 times
We currently resize original images on the server-side after upload, this allows us to convert all images to the same size - 720x540. If the the image original aspect ratio doesn't fit into 720x540 then we resize it to maximum possible image that can fit into 720x540, center it and fill the rest of the background with white color. This way all uploaded images are the same size and keep their proportions. We are planning switching to Amazon storage and thus want all the resizing to be done by uploader. It appears that none of the ThumbnailFitMode options would allow us to do the same thing as we do now - make all images the same size without cropping. I'm correct on that or I'm missing a setting?

Thank you.
Alex Nikulin  
#2 Posted : Monday, April 17, 2017 4:02:21 AM(UTC)
Alex Nikulin

Rank: Newbie

Groups: Member
Joined: 4/12/2016(UTC)
Posts: 9

Was thanked: 3 time(s) in 3 post(s)
Hello Ross,

Here is code, that makes fill color around a resized image. How to send to Amazon, you can see at our documentation and demo page.
Quote:

formatted-code.txt (4kb) downloaded 4 time(s).


Best regards
Alex

Edited by user Monday, April 17, 2017 4:07:56 AM(UTC)  | Reason: Not specified

steelhead  
#3 Posted : Monday, April 17, 2017 7:27:50 AM(UTC)
steelhead

Rank: Member

Groups: Member
Joined: 10/23/2009(UTC)
Posts: 24

Thanks: 3 times
Hi Alex,
I tried your code. The uploaded image is now constantly 720x540 in size, but unfortunately is not getting filled with white background when needed, instead it simply gets cropped. Here is an example of the console output:

image size: 2896x1944
thumbnail size: 720x483
thumbnail size with fill color(#ffffff): 720x540

Crop bounds: [152, 0, 2592, 1944]

The results are now identical to when thumbnailFitMode mode is set to Crop instead of Fit.

Thank you.
Alex Nikulin  
#4 Posted : Monday, April 17, 2017 8:19:26 PM(UTC)
Alex Nikulin

Rank: Newbie

Groups: Member
Joined: 4/12/2016(UTC)
Posts: 9

Was thanked: 3 time(s) in 3 post(s)
Ross,

Could you provide that image, please? I will test my code.
This code is actually cropping an image, but with crop area with the size larger than the image, and then applies resize. I need to calculate better the crop bounds.

Kind regards
Alex

Edited by user Monday, April 17, 2017 8:25:45 PM(UTC)  | Reason: Not specified

Alex Nikulin  
#5 Posted : Tuesday, April 18, 2017 1:15:19 AM(UTC)
Alex Nikulin

Rank: Newbie

Groups: Member
Joined: 4/12/2016(UTC)
Posts: 9

Was thanked: 3 time(s) in 3 post(s)
Ross,

I have done little changes in a code. Please check it.
I think it is not necessary to send me an image. I have created the image with the same dimensions in Photoshop.

formatted-code2.txt (4kb) downloaded 6 time(s).

Edited by user Wednesday, April 19, 2017 12:27:08 AM(UTC)  | Reason: Not specified

steelhead  
#6 Posted : Tuesday, April 18, 2017 6:47:19 PM(UTC)
steelhead

Rank: Member

Groups: Member
Joined: 10/23/2009(UTC)
Posts: 24

Thanks: 3 times
Hi Alex,
You are the man! Your last fix worked, thank you!
Last issue, not sure it can be resolved, after white borders are added at the bottom, the watermark is placed at the bottom of the original image, not the image with the borders. Is there a way to always put watermark at the bottom of the final image no matter if it has a border or not? Example attached

!sample.jpg.

{ mode: '*=Thumbnail', thumbnailFitMode: 'Fit', thumbnailWidth: '720', thumbnailHeight: '540', thumbnailBgColor: 0xffffff, thumbnailResizeQuality: 'high', thumbnailWatermark: 'ImageUrl=/images/watermark.png;Width=200;Height=204;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=10;' }
Alex Nikulin  
#7 Posted : Wednesday, April 19, 2017 12:14:05 AM(UTC)
Alex Nikulin

Rank: Newbie

Groups: Member
Joined: 4/12/2016(UTC)
Posts: 9

Was thanked: 3 time(s) in 3 post(s)
Hello Ross,

You can specify property When=AfterResize, and a watermark will be at the proper position. Documentation link:https://www.aurigma.com/docs/us8/applying-watermarks-iuf.htm#generalSettings

Quote:

{ mode: '*=Thumbnail', thumbnailFitMode: 'Fit', thumbnailWidth: '720', thumbnailHeight: '540', thumbnailBgColor: 0xffffff, thumbnailResizeQuality: 'high', thumbnailWatermark: 'ImageUrl=/images/watermark.png;Width=200;Height=204;Opacity=60;Position=BottomRight;OffsetY=5;OffsetX=10;When=AfterResize;' }


If you have any problems with the uploader, make a support ticket, please.

Kind regards
Alex

Edited by user Wednesday, April 19, 2017 12:21:24 AM(UTC)  | Reason: Not specified

thanks 1 user thanked Alex Nikulin for this useful post.
steelhead on 4/19/2017(UTC)
steelhead  
#8 Posted : Tuesday, May 30, 2017 7:46:54 AM(UTC)
steelhead

Rank: Member

Groups: Member
Joined: 10/23/2009(UTC)
Posts: 24

Thanks: 3 times
What if you have more than one converter? The code you provided works well with one converter, but I can’t get it to work with 3 converters.

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}
]


Using loop for converters is not enough as item.cropBounds(cropBounds) is applied to the file object not the converter. In the scenario below all thumbnails will be cropped to the last converter's dimensions (336x252)

Thank you.

Code:
for (var i = 0; i < this.converters().count(); i++)
	var item = this.files().get(0);
	var converter = this.converters().get(i);

	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, item.angle(), "fit");

	var thumbnailAspectRatio = thumbDim.width > thumbDim.height ? thumbDim.width/thumbDim.height : thumbDim.height/thumbDim.width; 
	var aspectedImageBounds = null;

	if(imageDim.width * imageDim.height < thumbDim.width * thumbDim.height){
		aspectedImageBounds = thumbDim;
	}else{
		aspectedImageBounds = applyAspectRatio(imageDim, thumbnailAspectRatio, imageDim.height<imageDim.width);
	}
	var cropBounds = [(imageDim.width-aspectedImageBounds.width)/2,(imageDim.height-aspectedImageBounds.height)/2,aspectedImageBounds.width, aspectedImageBounds.height];
	item.cropBounds(cropBounds);
}




Alex Nikulin  
#9 Posted : Wednesday, May 31, 2017 3:45:09 AM(UTC)
Alex Nikulin

Rank: Newbie

Groups: Member
Joined: 4/12/2016(UTC)
Posts: 9

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 2 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

thanks 1 user thanked Alex Nikulin for this useful post.
steelhead on 6/2/2017(UTC)
steelhead  
#10 Posted : Friday, June 02, 2017 6:59:02 PM(UTC)
steelhead

Rank: Member

Groups: Member
Joined: 10/23/2009(UTC)
Posts: 24

Thanks: 3 times
Thank you for the detailed and complex solution. It works, but user experience is not the best when more than one image needs to be uploaded. UI flashes 3 times during the upload as you get 3 separate consecutive batches of files, looks confusing for a large number of uploads.
It would be greater if you add a new type of FitMode called "Pad", similar to the one used by imageresizing control, so none of this hacking is required.

Thank you.
Andrew  
#11 Posted : Sunday, June 04, 2017 8:16:13 PM(UTC)
Andrew

Rank: Advanced Member

Groups: Member, Administration
Joined: 8/2/2003(UTC)
Posts: 865

Thanks: 2 times
Was thanked: 25 time(s) in 25 post(s)
We will consider adding a new fit mode in the future versions, however, meanwhile this is the only solution.

Thank you!
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.