Skip to main content
WolfShade
WolfShade
Legend
May 28, 2019
Question

CF11: Problem with ImageResize()

  • May 28, 2019
  • 1 reply
  • 230 views

Hello, all,

I've got an issue that has me perplexed.

We have a section on our restricted site for news.  There is an admin panel that allows someone (authorized) to create/edit news articles, and one of the optional fields is for uploading an image.

Now, so far this hasn't really presented any problems.  Until today, every image that was uploaded fit a particular format ratio, so everything appears correct.

Today, two images that are much more wide compared to the height have been uploaded.  When viewing the actual article, it looks okay.  However, on the 'landing' page of the site, there is a carousel that rotates among four selected articles that contain an image, along with four clickable thumbnails on the right side.  For both the thumbnails and the full-size image associated with it, those two images extend past the right of the image space, I'm assuming it's using overflow: hidden;.

I tried to update the page that processes the form, using imageInfo() to check height/width of all images, and use resizeImage() to bring the dimensions down.  First I check the height, and if it's more than 325px I resize it down to 325px.  Then I check for width, and if the width is greater than 528px, I resize it down to 528px.

But the images are pixelated and blurry.  I've put the old page back, for now, but would really like to understand why the jpg images are pixelated and blurry after going through resizeImage().

<cfif info.height gt 325>
     <cfset imageResize(myImage,"","325","highestQuality",0) />
</cfif>
<cfif info.width gt 528>
     <cfset imageResize(myImage,"528","","highestQuality",0) />
</cfif>

V/r,

^ _ ^

    This topic has been closed for replies.

    1 reply

    Charlie Arehart
    Community Expert
    Charlie ArehartCommunity Expert
    Community Expert
    May 28, 2019

    On the surface, I see no reason why you would experience this, but it may depend on the image. Have you confirmed that? Have you dug into the various metadata about the images that you may be comparing, to find an answer there?

    And are you sure the problem is in this processing of the image, to resize it? Couldn't it be in the carousel showing it? Have you don't something to prove that, looking at the resulting image on your own?

    You may also want to make sure that the code you think is running is indeed running. Put some cflog or other debugging statements in to be sure.

    Also, if you created some simple standalone code, you could try the code on cffiddle.org (which only supports cf2016 and 2018) or trycf.com, which supports them as well as 11 and 10, and lucee.

    Or if nothing else, some of us may try what you share to confirm we see the same blurriness. The problem may not be with your code, but perhaps with something in your environment. And I realize you may say you can't share the code or the image. I'm just proposing that you consider making a small stand-alone proof case, if you don't get any better solution.

    /Charlie (troubleshooter, carehart. org)
    WolfShade
    WolfShadeAuthor
    Legend
    May 30, 2019

    Hi, Charlie,

    I have not dug into the meta data, as I'm not a 'graphics guy', but I can ask our designer to take a look at the files in question.

    The fact that the image looks fine in the actual article, and is only screwed up in the carousel, does cast some doubt on the processing being the culprit.  But I can't see where any of the JavaScript for the carousel would have any impact on image quality, especially considering that if the image is resized it is resized to precisely the dimensions of the containing div.

    https://forums.adobe.com/people/Charlie+Arehart  wrote

    Or if nothing else, some of us may try what you share to confirm we see the same blurriness. The problem may not be with your code, but perhaps with something in your environment. And I realize you may say you can't share the code or the image. I'm just proposing that you consider making a small stand-alone proof case, if you don't get any better solution.

    The code, I can most likely share.  The image, absolutely not.  If this were for our public site, no problem.  Unfortunately, this is for our restricted site, and any information or images posted there cannot be made publicly available.  One has to have a CAC (Common Access Card) in order to access our restricted site.

    And as far as it possibly being something in our environment.. that would not surprise me, at all. 

    V/r,

    ^ _ ^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    May 30, 2019

    Might a change in aspect ratio be causing the problem? What happens when you test with the following code, which maintains aspect ratio.

    <cfset maxHeight=325>

    <cfset maxWidth=528>

    <cfif myImage.height gt maxHeight or myImage.width gt maxWidth>

        <!--- Rounded up to nearest percent --->

        <cfset heightPercent=int((maxHeight/myImage.height)*100+0.5)>

        <cfset widthPercent=int((maxWidth/myImage.width)*100+0.5)>

        <cfset resizePercent=min(heightPercent,widthPercent) & "%">

        <cfimage action="resize" height="#resizePercent#" width="#resizePercent#" source="#myImage#" destination="absolute-path-to-image-file" overwrite="true">

    </cfif>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices