Question

我正在尝试创建一个能够拍摄图片并在img元素中显示它的Angular PWA。

我成功完成的第一步：我现在有一个FAB按钮，它使用一个小的脚本打开相机取景器（使用html输入标签）：

const element: HTMLElement = document.getElementById('imageCapturer') as HTMLElement;
element.click();

点击的

：

<input type="file" accept="image/*" capture="environment" id="imageCapturer"">

但是，在拍照后，我想使用该图像将其呈现在img元素中（并通过API调用将该图像发送到数据库中）

我尝试了各种方法，包括尝试将src的file.name添加到img元素，并尝试创建一个具有使用文件属性的新img HTML元素。但是我仍然无法处理要在img标签中使用的图像。有人可以向我解释处理文件的正确方法是什么吗？

干杯！

Answer 1

您可以使用输入文件的事件更改。这个例子：

Math.toDegrees(Math.sin(Math.toRadians(launchAngle)));

注意：：当sumbit格式发送文件字节[]时，您可以在标签格式中添加更多属性[enctype =“ multipart / form-data”]。

$('#imageCapturer').on('change', function () {
   var input = $(this)[0];
   if (input.files && input.files[0]) {
        var fileName= input.files[0].name;
        var reader = new FileReader();
        reader.onload = function (e) {
            var buffer = e.target.result;
            var fileSize = input.files[0].size / 1024 / 1024; // in MB
            // SET IMG DISPLAY
            $('#image-display').attr('src', buffer).css({
                      'max-height': '170px',
                      'max-width': '170px',
        };
        reader.readAsDataURL(input.files[0]);
   }
});

Answer 2

我通过以下方式解决了这个问题：

首先，我将HTML更改为此：

<input type="file" accept="image/*" id="imageCapturer" style="display: none;" (change)="useImage($event)">
<img *ngIf="URL" [src]="URL" id="imageViewer">

然后函数useImage如下所示：

useImage(event) {
if (event.target.files && event.target.files[0]) {
  const reader = new FileReader();

  reader.readAsDataURL(event.target.files[0]); // Read file as data url
  reader.onloadend = (e) => { // function call once readAsDataUrl is completed
    this.URL = e.target['result']; // Set image in element
    this._changeDetection.markForCheck(); // Is called because ChangeDetection is set to onPush
  };
}

}

现在，无论何时捕获或选择新图像，它都会在视图中更新

如何处理<img/>元素中输入到Angular应用的图像？

2 个答案: