Skip to content

Commit

Permalink
Fixed Retina support bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@PixelsCommander
PixelsCommander committed Sep 10, 2015
1 parent 3747e90 commit b6ccf47
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 206 deletions.
183 changes: 95 additions & 88 deletions demo/js/vendor/html2canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1635,8 +1635,6 @@ function cloneNode(node, javascriptEnabled) {
var child = node.firstChild;
while(child) {
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
console.log(clone);

clone.appendChild(cloneNode(child, javascriptEnabled));
}
child = child.nextSibling;
Expand Down Expand Up @@ -4027,13 +4025,14 @@ module.exports = Renderer;
},{"./log":15}],23:[function(require,module,exports){
var Renderer = require('../renderer');
var LinearGradientContainer = require('../lineargradientcontainer');
var Utils = require('../utils');
var log = require('../log');

function CanvasRenderer(width, height) {
this.ratio = window.devicePixelRatio;
this.ratio = Utils.getDeviceRatio();

width = this.applyRatio(width);
height = this.applyRatio(height);
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);

Renderer.apply(this, arguments);
this.canvas = this.options.canvas || this.document.createElement("canvas");
Expand All @@ -4057,62 +4056,16 @@ function CanvasRenderer(width, height) {

CanvasRenderer.prototype = Object.create(Renderer.prototype);

CanvasRenderer.prototype.applyRatio = function(value) {
return value * this.ratio;
}

CanvasRenderer.prototype.applyRatioToBounds = function(bounds) {
bounds.width = bounds.width * this.ratio;
bounds.top = bounds.top * this.ratio;

//In case this is a size
try {
bounds.left = bounds.left * this.ratio;
bounds.height = bounds.height * this.ratio;
} catch (e) {

}

return bounds;
}

CanvasRenderer.prototype.applyRatioToPosition = function(position) {
position.left = position.left * this.ratio;
position.height = position.height * this.ratio;

return bounds;
}

CanvasRenderer.prototype.applyRatioToShape = function(shape) {
for (var i = 0; i < shape.length; i++) {
if (shape[i] instanceof Array) {
for (var k = 1; k < shape[i].length; k++) {
shape[i][k] = this.applyRatio(shape[i][k]);
}
}
}
return shape;
}

CanvasRenderer.prototype.applyRatioToFontSize = function(fontSize) {
var numericPart = parseFloat(fontSize) * this.ratio;
var stringPart = fontSize.replace(/[0-9]/g, '');

fontSize = numericPart + stringPart;

return fontSize;
}

CanvasRenderer.prototype.setFillStyle = function(fillStyle) {
this.ctx.fillStyle = typeof(fillStyle) === "object" && !!fillStyle.isColor ? fillStyle.toString() : fillStyle;
return this.ctx;
};

CanvasRenderer.prototype.rectangle = function(left, top, width, height, color) {
left = this.applyRatio(left);
top = this.applyRatio(top);
width = this.applyRatio(width);
height = this.applyRatio(height);
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);

this.setFillStyle(color).fillRect(left, top, width, height);
};
Expand All @@ -4126,17 +4079,17 @@ CanvasRenderer.prototype.circle = function(left, top, size, color) {
};

CanvasRenderer.prototype.circleStroke = function(left, top, size, color, stroke, strokeColor) {
left = this.applyRatio(left);
top = this.applyRatio(top);
size = this.applyRatio(size);
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
size = Utils.applyRatio(size);

this.circle(left, top, size, color);
this.ctx.strokeStyle = strokeColor.toString();
this.ctx.stroke();
};

CanvasRenderer.prototype.drawShape = function(shape, color) {
shape = this.applyRatioToShape(shape);
shape = Utils.applyRatioToShape(shape);

this.shape(shape);
this.setFillStyle(color).fill();
Expand All @@ -4158,14 +4111,16 @@ CanvasRenderer.prototype.taints = function(imageContainer) {
};

CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx, dy, dw, dh) {
sx = this.applyRatio(sx);
sy = this.applyRatio(sy);
//sw = this.applyRatio(sw);
//sh = this.applyRatio(sh);
dx = this.applyRatio(dx);
dy = this.applyRatio(dy);
dw = this.applyRatio(dw);
dh = this.applyRatio(dh);
//Do not scale source coordinates
//sx = Utils.applyRatio(sx);
//sy = Utils.applyRatio(sy);
//sw = Utils.applyRatio(sw);
//sh = Utils.applyRatio(sh);

dx = Utils.applyRatio(dx);
dy = Utils.applyRatio(dy);
dw = Utils.applyRatio(dw);
dh = Utils.applyRatio(dh);

if (!this.taints(imageContainer) || this.options.allowTaint) {
this.ctx.drawImage(imageContainer.image, sx, sy, sw, sh, dx, dy, dw, dh);
Expand All @@ -4175,8 +4130,8 @@ CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx
CanvasRenderer.prototype.clip = function(shapes, callback, context) {
this.ctx.save();
shapes.filter(hasEntries).forEach(function(shape) {
shape = this.applyRatioToShape(shape);
this.shape(shape).clip();
shape = Utils.applyRatioToShape(shape);
this.shape(shape)//.clip();
}, this);
callback.call(context);
this.ctx.restore();
Expand All @@ -4196,13 +4151,13 @@ CanvasRenderer.prototype.shape = function(shape) {
};

CanvasRenderer.prototype.font = function(color, style, variant, weight, size, family) {
size = this.applyRatioToFontSize(size);
size = Utils.applyRatioToFontSize(size);
this.setFillStyle(color).font = [style, variant, weight, size, family].join(" ").split(",")[0];
};

CanvasRenderer.prototype.fontShadow = function(color, offsetX, offsetY, blur) {
offsetX = this.applyRatio(offsetX);
offsetY = this.applyRatio(offsetY);
offsetX = Utils.applyRatio(offsetX);
offsetY = Utils.applyRatio(offsetY);

this.setVariable("shadowColor", color.toString())
.setVariable("shadowOffsetY", offsetX)
Expand Down Expand Up @@ -4234,20 +4189,20 @@ CanvasRenderer.prototype.setVariable = function(property, value) {
};

CanvasRenderer.prototype.text = function(text, left, bottom) {
left = this.applyRatio(left);
bottom = this.applyRatio(bottom);
left = Utils.applyRatio(left);
bottom = Utils.applyRatio(bottom);

this.ctx.fillText(text, left, bottom);
};

CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgroundPosition, size, bounds, left, top, width, height, borderData) {
debugger;
size = this.applyRatio(size);
bounds = this.applyRatioToBounds(bounds);
left = this.applyRatio(left);
top = this.applyRatio(top);
width = this.applyRatio(width);
height = this.applyRatio(height);
size = Utils.applyRatio(size);
bounds = Utils.applyRatioToBounds(bounds);
left = Utils.applyRatio(left);
top = Utils.applyRatio(top);
width = Utils.applyRatio(width);
height = Utils.applyRatio(height);

var shape = [
["line", Math.round(left), Math.round(top)],
Expand All @@ -4262,11 +4217,11 @@ CanvasRenderer.prototype.backgroundRepeatShape = function(imageContainer, backgr

CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backgroundPosition, size, bounds, borderLeft, borderTop) {
debugger;
bounds = this.applyRatioToBounds(bounds);
size = this.applyRatioToBounds(size);
backgroundPosition = this.applyRatioToBounds(backgroundPosition);
borderLeft = this.applyRatio(borderLeft);
borderTop = this.applyRatio(borderTop);
bounds = Utils.applyRatioToBounds(bounds);
size = Utils.applyRatioToBounds(size);
backgroundPosition = Utils.applyRatioToBounds(backgroundPosition);
borderLeft = Utils.applyRatio(borderLeft);
borderTop = Utils.applyRatio(borderTop);

var offsetX = Math.round(bounds.left + backgroundPosition.left + borderLeft), offsetY = Math.round(bounds.top + backgroundPosition.top + borderTop);
this.setFillStyle(this.ctx.createPattern(this.resizeImage(imageContainer, size), "repeat"));
Expand All @@ -4277,7 +4232,7 @@ CanvasRenderer.prototype.renderBackgroundRepeat = function(imageContainer, backg

CanvasRenderer.prototype.renderBackgroundGradient = function(gradientImage, bounds) {
debugger;
bounds = this.applyRatioToBounds(bounds);
bounds = Utils.applyRatioToBounds(bounds);

if (gradientImage instanceof LinearGradientContainer) {
var gradient = this.ctx.createLinearGradient(
Expand All @@ -4293,7 +4248,7 @@ CanvasRenderer.prototype.renderBackgroundGradient = function(gradientImage, boun
};

CanvasRenderer.prototype.resizeImage = function(imageContainer, size) {
size = this.applyRatioToBounds(size);
size = Utils.applyRatioToBounds(size);

var image = imageContainer.image;
if(image.width === size.width && image.height === size.height) {
Expand All @@ -4314,7 +4269,7 @@ function hasEntries(array) {

module.exports = CanvasRenderer;

},{"../lineargradientcontainer":14,"../log":15,"../renderer":22}],24:[function(require,module,exports){
},{"../lineargradientcontainer":14,"../log":15,"../renderer":22,"../utils":29}],24:[function(require,module,exports){
var NodeContainer = require('./nodecontainer');

function StackingContext(hasOwnStacking, opacity, element, parent) {
Expand Down Expand Up @@ -4676,6 +4631,58 @@ exports.parseBackgrounds = function(backgroundImage) {
return results;
};

exports.getDeviceRatio = function() {
return window.devicePixelRatio;
};

exports.applyRatio = function(value) {
return value * exports.getDeviceRatio();
}

exports.applyRatioToBounds = function(bounds) {
bounds.width = bounds.width * exports.getDeviceRatio();
bounds.top = bounds.top * exports.getDeviceRatio();

//In case this is a size
try {
bounds.left = bounds.left * exports.getDeviceRatio();
bounds.height = bounds.height * exports.getDeviceRatio();
} catch (e) {

}

return bounds;
}

exports.applyRatioToPosition = function(position) {
position.left = position.left * exports.getDeviceRatio();
position.height = position.height * exports.getDeviceRatio();

return bounds;
}

exports.applyRatioToShape = function(shape) {
for (var i = 0; i < shape.length; i++) {
if (shape[i] instanceof Array) {
for (var k = 1; k < shape[i].length; k++) {
shape[i][k] = this.applyRatio(shape[i][k]);
}
}
}
return shape;
}

exports.applyRatioToFontSize = function(fontSize) {
var numericPart = parseFloat(fontSize) * exports.getDeviceRatio();
var stringPart = fontSize.replace(/[0-9]/g, '');

fontSize = numericPart + stringPart;

return fontSize;
}



},{}],30:[function(require,module,exports){
var GradientContainer = require('./gradientcontainer');

Expand Down
Loading

0 comments on commit b6ccf47

Please sign in to comment.