将 Canvas 与 Angular Ionic 一起使用 - 难以保存带有附加文本的图像

Question

我正在尝试将 Canvas 与 Angular Ionic 一起使用，但在保存带有附加文本的图像时遇到困难，有什么想法吗？

图像 Url 来自 API，我使用 css 创建了图像叠加层以附加 ion-textarea

中的文本

这里是 HTML:

 <ion-content no-bounce>
  <ion-card>
    <ion-img id="mycanvas" src={{webFormatUrl}}>
    </ion-img>
    <div class="myOverlay">
      <div class="card-title">{{DisplayQuote}}</div>
      <div class="card-subtitle"></div>
    </div>
  </ion-card>
  <ion-item>
    <ion-textarea expand="full" [(ngModel)]="DisplayQuote" placeholder="Enter Inspirational Quote Here">
    </ion-textarea>
  </ion-item>
  <ion-item>
    <ion-button>Convert to Quote</ion-button>
  </ion-item>
</ion-content>

图像在浏览器中加载时是这样的（见附图）并带有叠加层，我在输入中添加了文本，所以我只需要按原样保存它！

Answer 1

您必须在 canvas 元素上创建和加载这些元素，然后保存它。

使用 canvas 元素代替该图像 + 叠加层。

<canvas id="quoteCanvas"></canvas>

从 component/view 控制器访问元素。

@ViewChild('quoteCanvas', {static: true}) canvas!: ElementRef;

用另一种方法进行构图，可以在 ion-textarea 的 ngModelChange:

上触发

updateCanvas() {
  const ctx = this.canvas.nativeElement.getContext('2d');
  // ...
}

然后 store/download 用另一种方法，可以用那个按钮触发它：

onDowloadButtonClick() {
  canvas.toBlob(blob => {
    // Store it
  });
}

将 Canvas 与 Angular Ionic 一起使用 - 难以保存带有附加文本的图像

Use Canvas with Angular Ionic - difficulty saving the image with text appended to it

base64

canvas

save-image

ionic-framework

angular