ImageProcessor with EPiServer not working

I am trying to configure an EPiServer 9 site with ImageProcessor but can't get it to work.

I have installed the following nuget packages:

ImageProcessor
ImageProcessor.Web
ImageProcessor.Web.Config

With the default configuration nothing happens. With the following custom configuration in config/imageprocessor/security.config ...

<security>
  <services>
    <service name="CloudImageService" type="ImageProcessor.Web.Services.CloudImageService, ImageProcessor.Web">
      <settings>
        <setting key="MaxBytes" value="8194304" />
        <setting key="Timeout" value="30000" />
        <setting key="Host" value="http://site.local/globalassets/"/>
      </settings>
    </service>
    <service prefix="remote.axd" name="RemoteImageService" type="ImageProcessor.Web.Services.RemoteImageService, ImageProcessor.Web">
      <settings>
        <setting key="MaxBytes" value="4194304" />
        <setting key="Timeout" value="3000" />
        <setting key="Protocol" value="http" />
      </settings>
      <whitelist>
      </whitelist>
    </service>
  </services>
</security>

... it seems like ImageProcessor is trying to resize my image but I get below error ...

[ImageFormatException: Input stream is not a supported format.]
   ImageProcessor.ImageFactory.Load(Stream stream) +523
   ImageProcessor.Web.HttpModules.<ProcessImageAsync>d__34.MoveNext() +3308
   System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() +31
   System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) +62
   System.Web.TaskAsyncHelper.EndTask(IAsyncResult ar) +64
   System.Web.AsyncEventExecutionStep.OnAsyncEventCompletion(IAsyncResult ar) +162

... when trying to resize an image to 200px width like this:

http://site.local/globalassets/sample_image.jpg?width=200

Anyone have any suggestions on how I can get this to work? The image is showing as normal without the width parameter:

http://site.local/globalassets/sample_image.jpg

In projects where I've used EPiServer with ImageProcessor I have always had to create my own IImageService.

Something like this:

https://gist.github.com/andreas-cloudnine/34dc468205a230f0579585db17aa1593

The ImageFile used is the media type in your project that inherits from EPiServer.Core.ImageData.

Then you have to use it in web.config as well, just replace the entire section with this configuration:

<security>
  <services>
    <service name="EPiServerImageService" type="YourSite.EPiServerImageService, YourSite" />
</services>
</security>