Ionic+AnglerJSでhtml2canvasでキャプチャできない
新しめのIonicではエラーがでてキャプチャできなかったメモ
あと、エラーがでるので、それもメモ
開発環境
Ionicでinitしたまま使っているので新しめ
ionic -v
5.2.5
"dependencies": {
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.7.1",
"core-js": "^2.5.4",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/architect": "~0.801.2",
"@angular-devkit/build-angular": "~0.801.2",
"@angular-devkit/core": "~8.1.2",
"@angular-devkit/schematics": "~8.1.2",
"@angular/cli": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@ionic/angular-toolkit": "~2.0.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
動作はできたけど。。。
タグ外に配置では動作
ionicのタグ外に配置すると動作しました。。
原因っぽい？
下記の前に移動したらキャプチャできたので、これが原因っぽい？
#shadow-root(opne)
でてくるエラー
core-5ba38749.js:58 DOMException: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Sharing constructed stylesheets in multiple documents is not allowed
at addStyle (http://127.0.0.1:8100/vendor.js:104892:51)
at attachStyles (http://127.0.0.1:8100/vendor.js:104901:21)
at updateComponent (http://127.0.0.1:8100/vendor.js:105728:9)
at Array.update (http://127.0.0.1:8100/vendor.js:105695:26)
at consumeTimeout (http://127.0.0.1:8100/vendor.js:104680:23)
at flush (http://127.0.0.1:8100/vendor.js:104703:5)
at ZoneDelegate.invoke (http://127.0.0.1:8100/polyfills.js:3365:26)
at Zone.run (http://127.0.0.1:8100/polyfills.js:3130:43)
at http://127.0.0.1:8100/polyfills.js:3861:36
at ZoneDelegate.invokeTask (http://127.0.0.1:8100/polyfills.js:3397:31)
ソース
index.htmlに直接書き込みで動作検証
src/app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
add to homescreen for ios
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
<div id="capture__" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
</body>
<script src="https://github.com/niklasvh/html2canvas/releases/download/v1.0.0-rc.3/html2canvas.min.js"></script>
<script>
function capture() {
console.log('capture')
html2canvas(document.querySelector('#capture__')).then(canvas => {
document.body.appendChild(canvas)
})
}
</script>
</html>
参考サイト
- html2canvas
https://html2canvas.hertzen.com/ - niklasvh/html2canvas
https://github.com/niklasvh/html2canvas - [ionic-v4] shadow-dom
https://forum.ionicframework.com/t/ionic-v4-shadow-dom/137350/2