To have the changes in \Umbraco\Js\umbraco.services.js you'll need to increment your Client Dependency version in /config/clientdependency.config, then restart the app, you should then see your changes.

Thanks Lucas! I didn't know about incrementing the Client Dependency version. That seems to work as far as changing the umbraco.services.js

I did some more digging, definately seems like a bug to me. (Will file an issue on issues.umbraco.org)

Also discussed this with James (Imageprocessor) South.

Seems like a round issue in the javascript.

Also I found out, width as well as height is used for resizing. While when using only width, the height is determined automatically by Imageprocessor while preserving the aspect ratio.

More information: http://imageprocessor.org/imageprocessor-web/resize.html

For now I made a workaround by adding &bgcolor in the querystring within these files:

umbraco\js\umbraco.controllers.js

umbraco\js\umbraco.services.js

I've been testing this in 7.1.1 as well as in a clean 7.1.4 install and an upgraded 7.1.1 install to 7.1.4. The issue still seems to be there in 7.1.4.

I've actually released an update to ImageProcessor (v1.9.5) on Nuget that should ensure this does not happen again by always rounding up not down when parsing floats.

https://www.nuget.org/packages/ImageProcessor/

Nice one James! And I didn't even file an issue in the Umbraco issuetracker yet :)

How are ImageProcessor updates streamed into the Umbraco core currently?

They're not really.

The guys grab the latest they can I think on Nuget install but it's limited to max out on v2 just now. I shall negotiate to change when I'm ready to release that. :)

Hi,

I'm having the same problem, but it seems I'd need another solution.

The resulting image is right here. As you can see in the right-hand side, there is a thin black padding.

The image URL querystring looks like this: ?width=500&height=239.72602739726029

If I change the height to 240, then the problem is solved. But the problem is that the image is inserted by the client directly into the TinyMCE, so I can't control the querystring.

I'm running Umbraco 7.1.5, and I have manually updated the project with the latest ImageProcessor NuGet packages. The ImageProcessor version is 2.0.0.0.

A possible solution could also be to set the Transparent parameter to False by default, but I can't figure out how to do that. I have tried a number of things in the /config/imageprocessor/processing.config file, but to no avail. I hope you're able to help!

Kind regards

Joel

Hi Joel,

I'll have another look. Can you post the original image without any resizing so I can test with it?

I'm working on a new release just now.

Cheers

James

Thank you James.

Sure, here is the original image.

Uhm, it seems that got cropped too!

You can get it here instead

https://dl.dropboxusercontent.com/u/1763655/crop-problem-original.jpg

Thanks.

I noticed something the other day when I was doing some colour conversion code where using (byte)double was rounding down whereas Convert.ToByte(double)was giving the expected output - This might be related.

I'll soon know anyway.

Ok, so I figured it out.... I can't believe I didn't spot this straight away.

The resize method was never originally designed to take the width and height attributes as a decimal value since pixel are integral values. Umbraco shouldn't be requesting them as such.

It's probably quicker and easier for me to update ImageProcessor (I have an update due anyway) to accept and correctly parse the decimal values as integers so I'll do that asap.

We found that this issue still exists in v7.2.4.  We even tried using the latest versions of ImageProcessor from Nuget to no avail.

In order to fix it for our needs, we set the image resizing to always output in png format (this shows a transparent line instead of a black line).

To do this, we modified the following files:

1. /umbraco/js/umbraco.services.js

changed                                                 

var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height; 
to
var src = img.url + "?width=" + newSize.width + "&height=" + newSize.height + "&format=png";

Thats not a wise idea. You're gonna increase output size a huge amount by hacking around and doing that to all your images.

How about you share the image and the url and image that is causing the problem?

Truth be told. Umbraco should fix this. The API for ImageProcessor explicitly states int as the parameter type.

Thanks James.  We understand the increase in size, but figure this is the best we can do until Umbraco really fixes the issue.

The problem occurs with any jpeg image that we use in the RTE, our clients often resize the images within the RTE and Umbraco normally calculates the height as a decimal, which leads to these black borders in the image.

Or, would this work without the black borders, if we just round the decimals to ints?

Answer: Nope - this doesn't work if we just round the decimals to ints.  
We still saw this issue on a client uploaded image: original size 3600 x 600, umbraco sized 783 x 130.

So, to sum things up:

James said:

It's probably quicker and easier for me to update ImageProcessor (I have an update due anyway) to accept and correctly parse the decimal values as integers so I'll do that asap.

Question: did you manage to take care of this James?

Zac said:

We found that this issue still exists in v7.2.4. We even tried using the latest versions of ImageProcessor from Nuget to no avail.

So I'm guessing the fix suggested by James is not added or it's not working.

Later on, James said:

Truth be told. Umbraco should fix this. The API for ImageProcessor explicitly states int as the parameter type.

So I could create an issue on the issue tracker for this. But I'm not entirely sure using integers instead of decimals solves the problem, because Zac said:

Or, would this work without the black borders, if we just round the decimals to ints? Answer: Nope - this doesn't work if we just round the decimals to ints. We still saw this issue on a client uploaded image: original size 3600 x 600, umbraco sized 783 x 130.

To be honest, I don't know. All I know is ImageProcessor correctly resizes images.

The issue is here and it still need to be fixed: http://issues.umbraco.org/issue/U4-4736

Seems as though this is still an issue?

I upgraded from 7.2.6 to 7.5.13 and got this issue. Is there a fix or some kind of workaround?

I just ran into this issue (again) ... and solved it by using an iis rewrite rule. Non-obtrusive solution, easily removable when the issue gets fixed ;-)

Added a rule to match all jpg/jpeg extensions that has a querystring param containing height/width. Rewrite those url's and prepend bgcolor=fff to the query string. No further code-modifications needed.

1 - Add rewrite extension to IIS 7 (probably already there).

2 - Modify your web.config adding the following rewrite rule:

   <rewrite>
        <rules>
            <rule name="Add bgcolor parameter" stopProcessing="true">
                <match url=".*" />
                <conditions>
                  <add input="{REQUEST_FILENAME}" pattern="\.*(jpe?g)" />
                  <add input="{QUERY_STRING}" pattern="height=(.*)" />
                  <add input="{QUERY_STRING}" pattern="width=(.*)" />
                  <add input="{QUERY_STRING}" pattern="bgcolor=fff" negate="true" />
                  <add input="&amp;{QUERY_STRING}" pattern="^(&amp;.*)|^&amp;$" />
                </conditions>
                <action type="Redirect" url="{R:0}?bgcolor=fff" appendQueryString="false" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>

Yoeri Van de Moortel answer actually works, just change the last line of the rewrite rule to:

<action type="Redirect" url="{R:0}?{QUERY_STRING}&amp;bgcolor=fff" appendQueryString="false" redirectType="Found" />

is working on a reply...