mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Compare commits
3 Commits
v1.0.0-alp
...
v1.0.0-alp
| Author | SHA1 | Date | |
|---|---|---|---|
|
b7c7464c5f | ||
|
|
ae019f174c | ||
|
|
ea6062c85b |
@@ -1,5 +1,9 @@
|
|||||||
### Changelog ###
|
### Changelog ###
|
||||||
|
|
||||||
|
#### v1.0.0-alpha.8 - 2.1.2018 ####
|
||||||
|
* Use correct doctype in cloned Document (Fix #1298)
|
||||||
|
* Fix individual border rendering (Fix #1349)
|
||||||
|
|
||||||
#### v1.0.0-alpha.7 - 31.12.2017 ####
|
#### v1.0.0-alpha.7 - 31.12.2017 ####
|
||||||
* Fix form input rendering (#1338)
|
* Fix form input rendering (#1338)
|
||||||
* Improve word line breaking algorithm
|
* Improve word line breaking algorithm
|
||||||
|
|||||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "html2canvas",
|
"name": "html2canvas",
|
||||||
"version": "1.0.0-alpha.7",
|
"version": "1.0.0-alpha.8",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
"name": "html2canvas",
|
"name": "html2canvas",
|
||||||
"description": "Screenshots with JavaScript",
|
"description": "Screenshots with JavaScript",
|
||||||
"main": "dist/npm/index.js",
|
"main": "dist/npm/index.js",
|
||||||
"version": "1.0.0-alpha.7",
|
"version": "1.0.0-alpha.8",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Niklas von Hertzen",
|
"name": "Niklas von Hertzen",
|
||||||
"email": "niklasvh@gmail.com",
|
"email": "niklasvh@gmail.com",
|
||||||
|
|||||||
28
src/Clone.js
28
src/Clone.js
@@ -614,7 +614,7 @@ export const cloneWindow = (
|
|||||||
});
|
});
|
||||||
|
|
||||||
documentClone.open();
|
documentClone.open();
|
||||||
documentClone.write('<!DOCTYPE html><html></html>');
|
documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
|
||||||
// Chrome scrolls the parent document for some reason after the write to the cloned window???
|
// Chrome scrolls the parent document for some reason after the write to the cloned window???
|
||||||
restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
|
restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
|
||||||
documentClone.replaceChild(
|
documentClone.replaceChild(
|
||||||
@@ -626,3 +626,29 @@ export const cloneWindow = (
|
|||||||
return iframeLoad;
|
return iframeLoad;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const serializeDoctype = (doctype: ?DocumentType): string => {
|
||||||
|
let str = '';
|
||||||
|
if (doctype) {
|
||||||
|
str += '<!DOCTYPE ';
|
||||||
|
if (doctype.name) {
|
||||||
|
str += doctype.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (doctype.internalSubset) {
|
||||||
|
str += doctype.internalSubset;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (doctype.publicId) {
|
||||||
|
str += `"${doctype.publicId}"`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (doctype.systemId) {
|
||||||
|
str += `"${doctype.systemId}"`;
|
||||||
|
}
|
||||||
|
|
||||||
|
str += '>';
|
||||||
|
}
|
||||||
|
|
||||||
|
return str;
|
||||||
|
};
|
||||||
|
|||||||
@@ -165,7 +165,7 @@ export default class Renderer {
|
|||||||
!container.style.background.backgroundColor.isTransparent() ||
|
!container.style.background.backgroundColor.isTransparent() ||
|
||||||
container.style.background.backgroundImage.length;
|
container.style.background.backgroundImage.length;
|
||||||
|
|
||||||
const renderableBorders = container.style.border.filter(
|
const hasRenderableBorders = container.style.border.some(
|
||||||
border =>
|
border =>
|
||||||
border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
|
border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
|
||||||
);
|
);
|
||||||
@@ -186,12 +186,17 @@ export default class Renderer {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
renderableBorders.forEach((border, side) => {
|
container.style.border.forEach((border, side) => {
|
||||||
|
if (
|
||||||
|
border.borderStyle !== BORDER_STYLE.NONE &&
|
||||||
|
!border.borderColor.isTransparent()
|
||||||
|
) {
|
||||||
this.renderBorder(border, side, container.curvedBounds);
|
this.renderBorder(border, side, container.curvedBounds);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
if (HAS_BACKGROUND || renderableBorders.length) {
|
if (HAS_BACKGROUND || hasRenderableBorders) {
|
||||||
const paths = container.parent ? container.parent.getClipPaths() : [];
|
const paths = container.parent ? container.parent.getClipPaths() : [];
|
||||||
if (paths.length) {
|
if (paths.length) {
|
||||||
this.target.clip(paths, callback);
|
this.target.clip(paths, callback);
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
margin: 10px;
|
margin: 10px;
|
||||||
background:#6F428C;
|
background:#6F428C;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
border-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box1 {
|
.box1 {
|
||||||
@@ -33,6 +34,12 @@
|
|||||||
border-color: green;
|
border-color: green;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.box5 {
|
||||||
|
border-style: none;
|
||||||
|
border-bottom: 50px solid #807d32;
|
||||||
|
border-bottom-width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background: #3a84c3;
|
background: #3a84c3;
|
||||||
}
|
}
|
||||||
@@ -43,5 +50,6 @@
|
|||||||
<div class="box2"> </div>
|
<div class="box2"> </div>
|
||||||
<div class="box3"> </div>
|
<div class="box3"> </div>
|
||||||
<div class="box4"> </div>
|
<div class="box4"> </div>
|
||||||
|
<div class="box5"> </div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
11
tests/reftests/images/doctype.html
Normal file
11
tests/reftests/images/doctype.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script type="text/javascript" src="../../test.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="../../assets/image.jpg" />
|
||||||
|
<img src="../../assets/image2.jpg" style="display:block;" />
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user