mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Re-introduce onclone option (Fix #1434)

Browse Source
This commit is contained in:
Niklas von Hertzen 2018-02-15 21:40:34 +08:00
parent 952eb4cf7c
commit 9fb9898894
4 changed files with 56 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/configuration.md
View File

@ -19,6 +19,7 @@ These are all of the available configuration options.
| imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout. | imageTimeout | `15000` | Timeout for loading an image (in milliseconds). Set to `0` to disable timeout.
| ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render. | ignoreElements | `(element) => false` | Predicate function which removes the matching elements from the render.
| logging | `true` | Enable logging for debug purposes | logging | `true` | Enable logging for debug purposes
| onclone | `null` | Callback function which is called when the Document has been cloned for rendering, can be used to modify the contents that will be rendered without affecting the original source document.
| proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded. | proxy | `null` | Url to the [proxy](/proxy/) which is to be used for loading cross-origin images. If left empty, cross-origin images won't be loaded.
| removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily | removeContainer | `true` | Whether to cleanup the cloned DOM elements html2canvas creates temporarily
| scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio. | scale | `window.devicePixelRatio` | The scale to use for rendering. Defaults to the browsers device pixel ratio.

17
src/Clone.js
View File

@ -611,14 +611,21 @@ export const cloneWindow = (
documentClone.documentElement.style.left = -bounds.left + 'px'; documentClone.documentElement.style.left = -bounds.left + 'px';
documentClone.documentElement.style.position = 'absolute'; documentClone.documentElement.style.position = 'absolute';
} }
const result = Promise.resolve([
cloneIframeContainer,
cloner.clonedReferenceElement,
cloner.resourceLoader
]);
const onclone = options.onclone;
return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement || return cloner.clonedReferenceElement instanceof cloneWindow.HTMLElement ||
cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement || cloner.clonedReferenceElement instanceof ownerDocument.defaultView.HTMLElement ||
cloner.clonedReferenceElement instanceof HTMLElement cloner.clonedReferenceElement instanceof HTMLElement
? Promise.resolve([ ? typeof onclone === 'function'
cloneIframeContainer, ? Promise.resolve().then(() => onclone(documentClone)).then(() => result)
cloner.clonedReferenceElement, : result
cloner.resourceLoader
])
: Promise.reject( : Promise.reject(
__DEV__ __DEV__
? `Error finding the ${referenceElement.nodeName} in the cloned document` ? `Error finding the ${referenceElement.nodeName} in the cloned document`

1
src/index.js
View File

@ -17,6 +17,7 @@ export type Options = {
ignoreElements?: HTMLElement => boolean, ignoreElements?: HTMLElement => boolean,
imageTimeout: number, imageTimeout: number,
logging: boolean, logging: boolean,
onclone?: Document => void,
proxy: ?string, proxy: ?string,
removeContainer: ?boolean, removeContainer: ?boolean,
scale: number, scale: number,

42
tests/reftests/options/onclone.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>element render test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
h2cOptions = {onclone: function(document) {
const remove = document.querySelector('.ignored');
remove.parentNode.removeChild(remove);
}};
</script>
<script type="text/javascript" src="../../test.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background: green;
}
#ignored, .ignored {
background: red;
width: 100px;
height: 100px;
}
body, html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="ignored">
ignore during onclone
</div>
<div id="div1">
great success
</div>
</body>
</html>