使用Ionic和AngularJS时无法通过html2canvas进行截图【未解决】

3 年 ago
科, 雅
2 minutes

在Ionic+AngularJS中无法使用html2canvas进行截图。

最新的Ionic版本出现错误，无法进行截图的备忘录。
而且，由于错误的缘故，这也是备忘录。

软件开发环境

因为我仍然使用初始化的Ionic版本，所以它相对较新。

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"
  },

我能动，可是… zuò wǒ , …)

将标签放在外部，不会起作用。

将Ionic的标签放置在外部时，它可以正常运行。

NoName_2019-9-12_15-29-45_No-00.png

可能是原因吗？

移动到下面的位置后就能够捕获到，所以这可能是原因？

#shadow-root(opne)
NoName_2019-9-12_15-58-46_No-00.png

出现错误

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)

Source

在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>

请参考以下网站

    • html2canvashttps://html2canvas.hertzen.com/

niklasvh/html2canvashttps://github.com/niklasvh/html2canvas

[ionic-v4] shadow-domhttps://forum.ionicframework.com/t/ionic-v4-shadow-dom/137350/2

bannerAds