Skip to content

Commit 3747e90

Browse files
PixelsCommanderPixelsCommander
committed
Fixed cross-browser compatibility
1 parent 4d6e72d commit 3747e90

File tree

6 files changed

+60
-22
lines changed

6 files changed

+60
-22
lines changed

‎demo/js/vendor/html2canvas.js

+17-3
Original file line numberDiff line numberDiff line change
@@ -1635,6 +1635,8 @@ function cloneNode(node, javascriptEnabled) {
16351635
var child = node.firstChild;
16361636
while(child) {
16371637
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
1638+
console.log(clone);
1639+
16381640
clone.appendChild(cloneNode(child, javascriptEnabled));
16391641
}
16401642
child = child.nextSibling;
@@ -1676,6 +1678,7 @@ module.exports = function(ownerDocument, containerDocument, width, height, optio
16761678
container.style.left = "-10000px";
16771679
container.style.top = "0px";
16781680
container.style.border = "0";
1681+
container.style.border = "0";
16791682
container.width = width;
16801683
container.height = height;
16811684
container.scrolling = "no"; // ios won't scroll without it
@@ -2054,6 +2057,7 @@ module.exports = (typeof(document) === "undefined" || typeof(Object.create) !==
20542057
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
20552058
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
20562059
log("Document cloned");
2060+
20572061
var attributeName = html2canvasNodeAttribute + html2canvasIndex;
20582062
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
20592063
document.querySelector(selector).removeAttribute(attributeName);
@@ -3492,7 +3496,17 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
34923496
blh = borderRadius[3][0],
34933497
blv = borderRadius[3][1];
34943498

3495-
var topWidth = width - trh,
3499+
var halfHeight = Math.floor(height / 2);
3500+
tlh = tlh > halfHeight ? halfHeight : tlh;
3501+
tlv = tlv > halfHeight ? halfHeight : tlv;
3502+
trh = trh > halfHeight ? halfHeight : trh;
3503+
trv = trv > halfHeight ? halfHeight : trv;
3504+
brh = brh > halfHeight ? halfHeight : brh;
3505+
brv = brv > halfHeight ? halfHeight : brv;
3506+
blh = blh > halfHeight ? halfHeight : blh;
3507+
blv = blv > halfHeight ? halfHeight : blv;
3508+
3509+
var topWidth = width - trh,
34963510
rightHeight = height - brv,
34973511
bottomWidth = width - brh,
34983512
leftHeight = height - blv;
@@ -4161,8 +4175,8 @@ CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx
41614175
CanvasRenderer.prototype.clip = function(shapes, callback, context) {
41624176
this.ctx.save();
41634177
shapes.filter(hasEntries).forEach(function(shape) {
4164-
//shape = this.applyRatioToShape(shape);
4165-
//this.shape(shape).clip();
4178+
shape = this.applyRatioToShape(shape);
4179+
this.shape(shape).clip();
41664180
}, this);
41674181
callback.call(context);
41684182
this.ctx.restore();

‎dist/htmlgl.js

+26-7
Original file line numberDiff line numberDiff line change
@@ -1659,6 +1659,8 @@ function cloneNode(node, javascriptEnabled) {
16591659
var child = node.firstChild;
16601660
while(child) {
16611661
if (javascriptEnabled === true || child.nodeType !== 1 || child.nodeName !== 'SCRIPT') {
1662+
console.log(clone);
1663+
16621664
clone.appendChild(cloneNode(child, javascriptEnabled));
16631665
}
16641666
child = child.nextSibling;
@@ -1700,6 +1702,7 @@ module.exports = function(ownerDocument, containerDocument, width, height, optio
17001702
container.style.left = "-10000px";
17011703
container.style.top = "0px";
17021704
container.style.border = "0";
1705+
container.style.border = "0";
17031706
container.width = width;
17041707
container.height = height;
17051708
container.scrolling = "no"; // ios won't scroll without it
@@ -2078,6 +2081,7 @@ module.exports = (typeof(document) === "undefined" || typeof(Object.create) !==
20782081
function renderDocument(document, options, windowWidth, windowHeight, html2canvasIndex) {
20792082
return createWindowClone(document, document, windowWidth, windowHeight, options, document.defaultView.pageXOffset, document.defaultView.pageYOffset).then(function(container) {
20802083
log("Document cloned");
2084+
20812085
var attributeName = html2canvasNodeAttribute + html2canvasIndex;
20822086
var selector = "[" + attributeName + "='" + html2canvasIndex + "']";
20832087
document.querySelector(selector).removeAttribute(attributeName);
@@ -3516,7 +3520,17 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
35163520
blh = borderRadius[3][0],
35173521
blv = borderRadius[3][1];
35183522

3519-
var topWidth = width - trh,
3523+
var halfHeight = Math.floor(height / 2);
3524+
tlh = tlh > halfHeight ? halfHeight : tlh;
3525+
tlv = tlv > halfHeight ? halfHeight : tlv;
3526+
trh = trh > halfHeight ? halfHeight : trh;
3527+
trv = trv > halfHeight ? halfHeight : trv;
3528+
brh = brh > halfHeight ? halfHeight : brh;
3529+
brv = brv > halfHeight ? halfHeight : brv;
3530+
blh = blh > halfHeight ? halfHeight : blh;
3531+
blv = blv > halfHeight ? halfHeight : blv;
3532+
3533+
var topWidth = width - trh,
35203534
rightHeight = height - brv,
35213535
bottomWidth = width - brh,
35223536
leftHeight = height - blv;
@@ -4185,8 +4199,8 @@ CanvasRenderer.prototype.drawImage = function(imageContainer, sx, sy, sw, sh, dx
41854199
CanvasRenderer.prototype.clip = function(shapes, callback, context) {
41864200
this.ctx.save();
41874201
shapes.filter(hasEntries).forEach(function(shape) {
4188-
//shape = this.applyRatioToShape(shape);
4189-
//this.shape(shape).clip();
4202+
shape = this.applyRatioToShape(shape);
4203+
this.shape(shape).clip();
41904204
}, this);
41914205
callback.call(context);
41924206
this.ctx.restore();
@@ -8755,6 +8769,8 @@ will produce an inaccurate conversion value. The same issue exists with the cx/c
87558769
//Update pixelRatio since could be resized on different screen with different ratio
87568770
HTMLGL.pixelRatio = window.devicePixelRatio || 1;
87578771

8772+
console.log(HTMLGL.pixelRatio);
8773+
87588774
width = width * HTMLGL.pixelRatio;
87598775
height = height * HTMLGL.pixelRatio;
87608776

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

8983-
var isInsideHtml2Canvas = !isMounted && (this.baseURI !== undefined && this.baseURI.length === 0);
8999+
debugger;
9000+
var isInsideHtml2Canvas = !isMounted || (this.baseURI === undefined || this.baseURI === '' || this.baseURI === null);
89849001

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

90739090
return new Promise(function(resolve, reject){
90749091
self.image = html2canvas(self, {
9075-
onrendered: self.applyNewTexture,
90769092
width: self.boundingRect.width * HTMLGL.pixelRatio,
90779093
height: self.boundingRect.height * HTMLGL.pixelRatio
9078-
}).then(resolve);
9094+
}).then(function(textureCanvas){
9095+
self.applyNewTexture(textureCanvas);
9096+
resolve();
9097+
});
90799098
});
90809099
}
90819100

90829101
//Recreating texture from canvas given after calling updateTexture
90839102
p.applyNewTexture = function (textureCanvas) {
9084-
//document.body.appendChild(textureCanvas);
9103+
document.body.appendChild(textureCanvas);
90859104
this.image = textureCanvas;
90869105
this.texture = PIXI.Texture.fromCanvas(this.image);
90879106

‎dist/htmlgl.min.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎page/js/htmlgl.min.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/gl-context.js

+2
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@
7171
//Update pixelRatio since could be resized on different screen with different ratio
7272
HTMLGL.pixelRatio = window.devicePixelRatio || 1;
7373

74+
console.log(HTMLGL.pixelRatio);
75+
7476
width = width * HTMLGL.pixelRatio;
7577
height = height * HTMLGL.pixelRatio;
7678

‎src/gl-element.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
}
2929
}
3030

31-
var isInsideHtml2Canvas = !isMounted && (this.baseURI !== undefined && this.baseURI.length === 0);
31+
debugger;
32+
var isInsideHtml2Canvas = !isMounted || (this.baseURI === undefined || this.baseURI === '' || this.baseURI === null);
3233

3334
if (!isInsideHtml2Canvas) {
3435
HTMLGL.elements.push(this);
@@ -120,16 +121,18 @@
120121

121122
return new Promise(function(resolve, reject){
122123
self.image = html2canvas(self, {
123-
onrendered: self.applyNewTexture,
124124
width: self.boundingRect.width * HTMLGL.pixelRatio,
125125
height: self.boundingRect.height * HTMLGL.pixelRatio
126-
}).then(resolve);
126+
}).then(function(textureCanvas){
127+
self.applyNewTexture(textureCanvas);
128+
resolve();
129+
});
127130
});
128131
}
129132

130133
//Recreating texture from canvas given after calling updateTexture
131134
p.applyNewTexture = function (textureCanvas) {
132-
//document.body.appendChild(textureCanvas);
135+
document.body.appendChild(textureCanvas);
133136
this.image = textureCanvas;
134137
this.texture = PIXI.Texture.fromCanvas(this.image);
135138

0 commit comments

Comments
 (0)