Fix shadow offsets on dataUrl export (fabricjs#5593)

thiagocunha · Mar 24, 2019 · 7441458 · 7441458
1 parent 28e21b7
commit 7441458
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 0 deletions.
diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js
@@ -71,9 +71,11 @@
           originalInteractive = this.interactive,
           originalContext = this.contextContainer,
           newVp = [newZoom, 0, 0, newZoom, translateX, translateY],
+          originalRetina = this.enableRetinaScaling,
           canvasEl = fabric.util.createCanvasElement();
       canvasEl.width = scaledWidth;
       canvasEl.height = scaledHeight;
+      this.enableRetinaScaling = false;
       this.interactive = false;
       this.viewportTransform = newVp;
       this.width = scaledWidth;
@@ -88,6 +90,7 @@
       this.calcViewportBoundaries();
       this.contextContainer = originalContext;
       this.interactive = originalInteractive;
+      this.enableRetinaScaling = originalRetina;
       return canvasEl;
     },
   });

diff --git a/test/visual/golden/dataurl10.png b/test/visual/golden/dataurl10.png
diff --git a/test/visual/golden/dataurl12.png b/test/visual/golden/dataurl12.png
diff --git a/test/visual/toDataURL.js b/test/visual/toDataURL.js
@@ -215,6 +215,133 @@
     height: 1800,
   });
 
+  function toDataURL10(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = true;
+    fabric.devicePixelRatio = 2;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5 });
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl with retina',
+    code: toDataURL10,
+    // use the same golden on purpose
+    golden: 'dataurl10.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
+  function toDataURL11(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = false;
+    fabric.devicePixelRatio = 1;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5 });
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl without retina',
+    code: toDataURL11,
+    // use the same golden on purpose
+    golden: 'dataurl10.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
+  function toDataURL12(fabricCanvas, callback) {
+    fabricCanvas.enableRetinaScaling = 2;
+    fabric.devicePixelRatio = 2;
+    fabricCanvas.setDimensions({
+      width: 300,
+      height: 300,
+    });
+    var shadow = {
+      color: 'rgba(0,0,0,0.6)',
+      blur: 1,
+      offsetX: 50,
+      offsetY: 10,
+      opacity: 0.6,
+    };
+
+    var rect = new fabric.Rect({
+      left: 10,
+      top: 10,
+      fill:  '#FF0000',
+      stroke: '#000',
+      width: 100,
+      height: 100,
+      strokeWidth: 10,
+      opacity: .8
+    });
+
+    rect.setShadow(shadow);
+    fabricCanvas.add(rect);
+    var dataUrl = fabricCanvas.toDataURL({ multiplier: 0.5, enableRetinaScaling: true });
+    fabric.devicePixelRatio = 1;
+    callback(dataUrl);
+  }
+
+  tests.push({
+    test: 'shadow offsets dataUrl with retina and retinaScaling enable in export',
+    code: toDataURL12,
+    // use the same golden on purpose
+    golden: 'dataurl12.png',
+    percentage: 0.09,
+    width: 300,
+    height: 300,
+  });
+
 
   function testWrapper(test) {
     var actualTest = test.code;