diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js index 7e8ee51567b..86e63eed60f 100644 --- 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 new file mode 100644 index 00000000000..2b256553122 Binary files /dev/null and b/test/visual/golden/dataurl10.png differ diff --git a/test/visual/golden/dataurl12.png b/test/visual/golden/dataurl12.png new file mode 100644 index 00000000000..e167a2c55dd Binary files /dev/null and b/test/visual/golden/dataurl12.png differ diff --git a/test/visual/toDataURL.js b/test/visual/toDataURL.js index fdcf3342eba..86c3bdfab8b 100644 --- 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;