小编Cod*_*0d3的帖子

我目前在使用 Html2Canvas 包将复杂的 DIV 元素渲染为 CANVAS 元素时遇到问题。问题是我想写到 CANVAS 的 DIV，有

overflow: auto 

所以DIV大于屏幕比例。并在火上加油，上述所有内容都在 Angular 5 组件中，这意味着当我访问 .css 时 CSS 不可用ElementRef.nativeElement.innerHTML。

Encapsulation.None 在这里也不适合我。

HTML 到画布设置：

  async: true,
  logging: false,
  backgroundColor: null,
  allowTaint: true,
  foreignObjectRendering: true,
  removeContainer: true

结果：

注意图像周围的黑色空间，是屏幕比例，但无法渲染。

当我设置时：

foreignObjectRendering: false

我得到了非常满意的质量和我想要的尺寸。但图表如下所示：

提前致谢！这对我来说非常重要。我保证，如果我能解决这个问题，我将创建一个非常有用的 NPM 包，以在 Angular 2+ 中将元素导出为 PDF 文件

为方便起见，还附上 Html2Canvas 文档：http ://html2canvas.hertzen.com/configuration/

我的 Monorepo 目前由 Lerna.js 管理。除了我用来自动化 npm 发布的 GitHub 操作工作流程之外，一切都运行良好。

情况如下：

我更新packages/types-lib，然后更新packages/server新类型。完成后，我将所有内容推送到 GitHub，操作是碰撞packages/types-lib版本。但是，它不会更新作为依赖项packages/types-lib列出的内容。packages/server在本地，它可以工作，但在工作流程中不起作用......

这是我的工作流程代码：

name: Publish To NPM
on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest

steps:
  - name: "Checkout"
    uses: actions/checkout@v2
    with:
      fetch-depth: 0

  - name: "Use NodeJS 16.14.2"
    uses: actions/setup-node@v2
    with:
      node-version: '16.14.2'

  - name: "Setup npm"
    run: |
      npm set @pastelabs:registry=https://registry.npmjs.org/
      npm set "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}"

  - name: Install dependencies
    run: |
      yarn install --frozen-lockfile
      yarn lerna …