title: Displaying georeferenced images using OpenLayers 5
body: <p>I'm trying to make an application where the user can georeference scanned maps. You can look at an example here: <a href="https://codesandbox.io/s/2o99jvrnyy" rel="noreferrer">https://codesandbox.io/s/2o99jvrnyy</a>
  There are two images: </p>
  
  <ul>
  <li><a href="https://uploads.codesandbox.io/uploads/user/c5698c75-7c6e-4ce1-aade-62711b8a02d2/Coew-test.png" rel="noreferrer">assets/test.png</a> - without rotation</li>
  <li><a href="https://uploads.codesandbox.io/uploads/user/c5698c75-7c6e-4ce1-aade-62711b8a02d2/M6Pw-test_rotation.png" rel="noreferrer">assets/test_rotation.png</a> - with rotation</li>
  </ul>
  
  <p>The first image is loaded correctly on the map but the one with rotation is not.</p>
  
  <p><strong>I can't find information on whether OpenLayers 5 can handle images with transformation parameters stored in world file</strong>. Probably I'm missing something but can't figure out what.</p>
  
  <p>This is how my logic works:</p>
  
  <p>Transformation parameters are calculated with affine transformation using 4 points. You can see the logic in <strong>Affine.js</strong> file. At least 4 points are picked up from the source image and the map. Then using these 4 points the transformation parameters are calculated. After that I'm calculating the extent of the image:</p>
  
  <pre><code>width = image.width in pixels
  height = image.height in pixels
  width *= Math.sqrt(Math.pow(parameters.A, 2) + Math.pow(parameters.D, 2));
  height *= Math.sqrt(Math.pow(parameters.B, 2) + Math.pow(parameters.E, 2));
  
  // then the extent in projection units is
  extent = [parameters.C, parameters.F - height, parameters.C + width, parameters.F];
  </code></pre>
  
  <p>World file parameters are calculated as defined <a href="https://en.wikipedia.org/wiki/World_file#Definition" rel="noreferrer">here</a>.</p>
  
  <p><strong>Probably the problem is that the image with rotation is not rotated when loaded as static image in OpenLayers 5, but can't find a way to do it.</strong></p>
  
  <p>I tried to load both images in QGIS and ArcMap with calculated parameters and both of them are loaded correctly. You can see the result for the second picture:</p>
  
  <p><a href="https://i.stack.imgur.com/4lhw4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4lhw4.png" alt="enter image description here"></a></p>
  
  <p>You can see the parameters for each image here:</p>
  
  <pre><code>Image: test.png
  Calculated extent: [436296.79726721847, 4666723.973240128, 439864.3389057907, 4669253.416495154]
  Calculated parameters (for world file):
  3.8359372067274027
  -0.03146800786355865
  -0.03350636818089405
  -3.820764346376064
  436296.79726721847
  4669253.416495154
  
  Image: test_rotation.png
  Calculated extent: [437178.8291026594, 4667129.767589236, 440486.91675884253, 4669768.939256327]
  Calculated parameters (for world file):
  3.506332904308879
  -1.2831186688536016
  -1.3644002712982917
  -3.7014921022625864
  437178.8291026594
  4669768.939256327
  </code></pre>