From df1cffaadee9bbc34d9a56f1a43689ef395637ab Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Wed, 24 Feb 2016 08:47:27 +0100 Subject: [PATCH] add retina scaling effect to dataUrl exporter Add retina scaling as a normal dataurl multiplier. Removed setWidth and setHeight in favor of setDimensions Removed rescaling back of canvas because setDimension will clear the transform anyway. --- src/mixins/canvas_dataurl_exporter.mixin.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/mixins/canvas_dataurl_exporter.mixin.js b/src/mixins/canvas_dataurl_exporter.mixin.js index f65775b8..2f30fec8 100644 --- a/src/mixins/canvas_dataurl_exporter.mixin.js +++ b/src/mixins/canvas_dataurl_exporter.mixin.js @@ -44,6 +44,10 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati height: options.height }; + if (this._isRetinaScaling()) { + multiplier *= fabric.devicePixelRatio; + } + if (multiplier !== 1) { return this.__toDataURLWithMultiplier(format, quality, cropping, multiplier); } @@ -111,16 +115,18 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati var origWidth = this.getWidth(), origHeight = this.getHeight(), + origRetinaScaling = this.enableRetinaScaling, scaledWidth = origWidth * multiplier, scaledHeight = origHeight * multiplier, activeObject = this.getActiveObject(), activeGroup = this.getActiveGroup(), - ctx = this.contextContainer; + this.enableRetinaScaling = false; if (multiplier > 1) { - this.setWidth(scaledWidth).setHeight(scaledHeight); + this.setDimensions({width: scaledWidth, height: scaledHeight}); } + ctx.save(); ctx.scale(multiplier, multiplier); if (cropping.left) { @@ -156,9 +162,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati // background properly (while context is scaled) this.width = origWidth; this.height = origHeight; - - ctx.scale(1 / multiplier, 1 / multiplier); - this.setWidth(origWidth).setHeight(origHeight); + this.enableRetinaScaling = origRetinaScaling; + this.setDimensions({width: origWidth, height: origHeight}); if (activeGroup) { this._restoreBordersControlsOnGroup(activeGroup);