在 AppendChild (Angular) 之后修改 HTMLCanvasElement？答案

【问题标题】：Modify HTMLCanvasElement after AppendChild (Angular)?在 AppendChild (Angular) 之后修改 HTMLCanvasElement？
【发布时间】：2020-12-03 01:11:13
【问题描述】：

希望大家能帮帮我，提前谢谢！

背景：我正在构建一个电子邮件模板 UI。用户给他们的模板一个名称并将 HTML 类型（或复制）到文本区域中，然后当他们单击保存时，该模板被添加到 firestore 文档中。在 keyup 上，我使用 DomSanitizer 在条目下方呈现模板。所有这些任务都在手头上。

任务：当用户点击保存他们的模板时，我不想只保存他们的模板。弹出一个带有 HTML 预览的模态框，按比例缩小以适合模态框，他们必须再次单击“保存”。为此，我需要能够缩小 HTML。据我所知，为了做到这一点，我需要将其转换为图像。我正在使用 html2canvas 从呈现的 HTML 中执行此操作。

挑战：到目前为止，我只发现 appendChild 作为呈现 html2canvas 的一种方法，但在将画布或 div 插入模态后，我似乎无法调整其大小。它只是全尺寸地拍打在那里。我需要使图像适合模态，最好是居中，最好是缩放以适合。你们能帮忙吗？

代码：

HTML：

<div class="card" style="width: 50%;">
    <h5 class="card-header">Create a Template:</h5>
    <div class="card-body">
        <div class="form-group">
            <label for="templateName">Template Name:</label>
            <input name="templateName" 
                id="templateName" 
                rows="4"
                cols="30"
                class="form-control card-text" 
                [(ngModel)]="newTemplateName">
        </div>
        <div class="form-group">
            <label for="newTemplateBody">Template Body:</label>
            <textarea name="newTemplateBody" 
                id="newTemplateBody" 
                rows="3" 
                placeholder="Enter your new template HTML here"
                class="form-control card-text"
                [(ngModel)]="newTemplateBody"
                (keyup)="sendHTML()">
            </textarea>
        </div>
        <button type="button" class="btn btn-primary" (click)="open(content)">
            Save Template
          </button>
    </div>
</div>
<div [innerHTML]="renderedHTML" id="renderedHTML"></div>

<!-- Button trigger modal. -->
  <ng-template #content let-modal>
    <div class="modal-header">
      <h4 class="modal-title" id="modal-basic-title">Template Preview</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to save?</p>
      <div id="previewDiv">
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
      <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save Template</button>
    </div>
  </ng-template>

打字稿：

//runs on every keyup
  sendHTML() {
    this.renderedHTML = this.sanitizer.bypassSecurityTrustHtml(this.newTemplateBody);
    
    let element = document.getElementById("renderedHTML");
    html2canvas(element, {
      allowTaint: true //allowTaint just lets me use external images in the html2canvas.
    }).then(canvas => {

      //the canvas is stored instead of rendered as we don't need it until the modal pops up.
      this.testImage = canvas;
    })
  }
  //opens the modal
  open(content) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' })
    
    //attaches the image to the modal. This is where I have some issues.
    document.getElementById('previewDiv').append(this.testImage);
  }

视觉效果：

【问题讨论】：

标签： angular bootstrap-modal html2canvas

【解决方案1】：

更新：

我还没有解决这个特定的解决方案，但我确实找到了解决方法。我只是更改了模态框的大小以适应模板的 HTML。我不喜欢向下滚动，但现在就可以了。

寻找如何调整模态框的大小比它应该花费的时间更长，所以对于其他有这个问题的人来说，它只是

open(content) {
  this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'xl' })
}

也许我需要转换为 png 而不是使用画布？在我不得不绕回这部分之前，希望得到输入。

【讨论】：