Merge pull request #12393 from mike-000/patch-6

Scale up static Image and round to nearest pixel to avoid rounding errors

src/ol/Image.js

@@ -136,6 +136,7 @@ class ImageWrapper extends ImageBase {
    */
   setImage(image) {
     this.image_ = image;
+    this.resolution = getHeight(this.extent) / this.image_.height;
   }
 
   /**

src/ol/source/ImageStatic.js

@@ -135,10 +135,19 @@ class Static extends ImageSource {
         imageWidth = image.width;
         imageHeight = image.height;
       }
-      const resolution = getHeight(imageExtent) / imageHeight;
+      const extentWidth = getWidth(imageExtent);
-      const targetWidth = Math.ceil(getWidth(imageExtent) / resolution);
+      const extentHeight = getHeight(imageExtent);
-      if (targetWidth != imageWidth) {
+      const xResolution = extentWidth / imageWidth;
-        const context = createCanvasContext2D(targetWidth, imageHeight);
+      const yResolution = extentHeight / imageHeight;
+      let targetWidth = imageWidth;
+      let targetHeight = imageHeight;
+      if (xResolution > yResolution) {
+        targetWidth = Math.round(extentWidth / yResolution);
+      } else {
+        targetHeight = Math.round(extentHeight / xResolution);
+      }
+      if (targetWidth !== imageWidth || targetHeight !== imageHeight) {
+        const context = createCanvasContext2D(targetWidth, targetHeight);
         assign(context, this.getContextOptions());
         const canvas = context.canvas;
         context.drawImage(

test/browser/spec/ol/source/imagestatic.test.js

@@ -16,7 +16,7 @@ describe('ol.source.ImageStatic', function () {
   });
 
   describe('#getImage', function () {
-    it('scales image to fit imageExtent', function (done) {
+    it('scales image height to fit imageExtent', function (done) {
       const source = new Static({
         url: 'spec/ol/source/images/12-655-1583.png',
         imageExtent: [
@@ -31,7 +31,30 @@ describe('ol.source.ImageStatic', function () {
       const image = source.getImage(extent, resolution, pixelRatio, projection);
 
       source.on('imageloadend', function (event) {
-        expect(image.getImage().width).to.be(128);
+        expect(image.getImage().width).to.be(256);
+        expect(image.getImage().height).to.be(512);
+        done();
+      });
+
+      image.load();
+    });
+
+    it('scales image width to fit imageExtent', function (done) {
+      const source = new Static({
+        url: 'spec/ol/source/images/12-655-1583.png',
+        imageExtent: [
+          -13629027.891360067,
+          4539747.983913189,
+          -13609460.012119063,
+          4549531.923533691,
+        ],
+        projection: projection,
+      });
+
+      const image = source.getImage(extent, resolution, pixelRatio, projection);
+
+      source.on('imageloadend', function (event) {
+        expect(image.getImage().width).to.be(512);
         expect(image.getImage().height).to.be(256);
         done();
       });
@@ -55,8 +78,8 @@ describe('ol.source.ImageStatic', function () {
       const image = source.getImage(extent, resolution, pixelRatio, projection);
 
       source.on('imageloadend', function (event) {
-        expect(image.getImage().width).to.be(127);
+        expect(image.getImage().width).to.be(254);
-        expect(image.getImage().height).to.be(254);
+        expect(image.getImage().height).to.be(508);
         done();
       });