Skip to content

Commit

Permalink
Fixed cross-browser compatibility
Browse files Browse the repository at this point in the history
  • Loading branch information
@PixelsCommander
PixelsCommander committed Aug 24, 2015
1 parent 4d6e72d commit 3747e90
Show file tree
Hide file tree
Showing 6 changed files with 60 additions and 22 deletions.
20 changes: 17 additions & 3 deletions demo/js/vendor/html2canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1635,6 +1635,8 @@ 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 @@ -1676,6 +1678,7 @@ module.exports = function(ownerDocument, containerDocument, width, height, optio
container.style.left = "-10000px";
container.style.top = "0px";
container.style.border = "0";
container.style.border = "0";
container.width = width;
container.height = height;
container.scrolling = "no"; // ios won't scroll without it
Expand Down Expand Up @@ -2054,6 +2057,7 @@ module.exports = (typeof(document) === "undefined" || typeof(Object.create) !==
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
log("Document cloned");

var attributeName = html2canvasNodeAttribute + html2canvasIndex;
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
document.querySelector(selector).removeAttribute(attributeName);
Expand Down Expand Up @@ -3492,7 +3496,17 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
blh = borderRadius[3][0],
blv = borderRadius[3][1];

var topWidth = width - trh,
var halfHeight = Math.floor(height / 2);
tlh = tlh > halfHeight ? halfHeight : tlh;
tlv = tlv > halfHeight ? halfHeight : tlv;
trh = trh > halfHeight ? halfHeight : trh;
trv = trv > halfHeight ? halfHeight : trv;
brh = brh > halfHeight ? halfHeight : brh;
brv = brv > halfHeight ? halfHeight : brv;
blh = blh > halfHeight ? halfHeight : blh;
blv = blv > halfHeight ? halfHeight : blv;

var topWidth = width - trh,
rightHeight = height - brv,
bottomWidth = width - brh,
leftHeight = height - blv;
Expand Down Expand Up @@ -4161,8 +4175,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 = this.applyRatioToShape(shape);
this.shape(shape).clip();
}, this);
callback.call(context);
this.ctx.restore();
Expand Down
33 changes: 26 additions & 7 deletions dist/htmlgl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1659,6 +1659,8 @@ 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 @@ -1700,6 +1702,7 @@ module.exports = function(ownerDocument, containerDocument, width, height, optio
container.style.left = "-10000px";
container.style.top = "0px";
container.style.border = "0";
container.style.border = "0";
container.width = width;
container.height = height;
container.scrolling = "no"; // ios won't scroll without it
Expand Down Expand Up @@ -2078,6 +2081,7 @@ module.exports = (typeof(document) === "undefined" || typeof(Object.create) !==
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
log("Document cloned");

var attributeName = html2canvasNodeAttribute + html2canvasIndex;
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
document.querySelector(selector).removeAttribute(attributeName);
Expand Down Expand Up @@ -3516,7 +3520,17 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
blh = borderRadius[3][0],
blv = borderRadius[3][1];

var topWidth = width - trh,
var halfHeight = Math.floor(height / 2);
tlh = tlh > halfHeight ? halfHeight : tlh;
tlv = tlv > halfHeight ? halfHeight : tlv;
trh = trh > halfHeight ? halfHeight : trh;
trv = trv > halfHeight ? halfHeight : trv;
brh = brh > halfHeight ? halfHeight : brh;
brv = brv > halfHeight ? halfHeight : brv;
blh = blh > halfHeight ? halfHeight : blh;
blv = blv > halfHeight ? halfHeight : blv;

var topWidth = width - trh,
rightHeight = height - brv,
bottomWidth = width - brh,
leftHeight = height - blv;
Expand Down Expand Up @@ -4185,8 +4199,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 = this.applyRatioToShape(shape);
this.shape(shape).clip();
}, this);
callback.call(context);
this.ctx.restore();
Expand Down Expand Up @@ -8755,6 +8769,8 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
//Update pixelRatio since could be resized on different screen with different ratio
HTMLGL.pixelRatio = window.devicePixelRatio || 1;

console.log(HTMLGL.pixelRatio);

width = width * HTMLGL.pixelRatio;
height = height * HTMLGL.pixelRatio;

Expand Down Expand Up @@ -8980,7 +8996,8 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
}
}

var isInsideHtml2Canvas = !isMounted && (this.baseURI !== undefined && this.baseURI.length === 0);
debugger;
var isInsideHtml2Canvas = !isMounted || (this.baseURI === undefined || this.baseURI === '' || this.baseURI === null);

if (!isInsideHtml2Canvas) {
HTMLGL.elements.push(this);
Expand Down Expand Up @@ -9072,16 +9089,18 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c

return new Promise(function(resolve, reject){
self.image = html2canvas(self, {
onrendered: self.applyNewTexture,
width: self.boundingRect.width * HTMLGL.pixelRatio,
height: self.boundingRect.height * HTMLGL.pixelRatio
}).then(resolve);
}).then(function(textureCanvas){
self.applyNewTexture(textureCanvas);
resolve();
});
});
}

//Recreating texture from canvas given after calling updateTexture
p.applyNewTexture = function (textureCanvas) {
//document.body.appendChild(textureCanvas);
document.body.appendChild(textureCanvas);
this.image = textureCanvas;
this.texture = PIXI.Texture.fromCanvas(this.image);

Expand Down
8 changes: 4 additions & 4 deletions dist/htmlgl.min.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions page/js/htmlgl.min.js
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/gl-context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@
//Update pixelRatio since could be resized on different screen with different ratio
HTMLGL.pixelRatio = window.devicePixelRatio || 1;

console.log(HTMLGL.pixelRatio);

width = width * HTMLGL.pixelRatio;
height = height * HTMLGL.pixelRatio;

Expand Down
11 changes: 7 additions & 4 deletions src/gl-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
}
}

var isInsideHtml2Canvas = !isMounted && (this.baseURI !== undefined && this.baseURI.length === 0);
debugger;
var isInsideHtml2Canvas = !isMounted || (this.baseURI === undefined || this.baseURI === '' || this.baseURI === null);

if (!isInsideHtml2Canvas) {
HTMLGL.elements.push(this);
Expand Down Expand Up @@ -120,16 +121,18 @@

return new Promise(function(resolve, reject){
self.image = html2canvas(self, {
onrendered: self.applyNewTexture,
width: self.boundingRect.width * HTMLGL.pixelRatio,
height: self.boundingRect.height * HTMLGL.pixelRatio
}).then(resolve);
}).then(function(textureCanvas){
self.applyNewTexture(textureCanvas);
resolve();
});
});
}

//Recreating texture from canvas given after calling updateTexture
p.applyNewTexture = function (textureCanvas) {
//document.body.appendChild(textureCanvas);
document.body.appendChild(textureCanvas);
this.image = textureCanvas;
this.texture = PIXI.Texture.fromCanvas(this.image);

Expand Down

0 comments on commit 3747e90

Please sign in to comment.