Question

我正在实现一个简单的图像上传表格。在电话上，用户可以选择使用相机拍照并上传。

由于某些原因，以这种方式拍摄的照片未保存到图库中。

HTML声明中是否缺少任何内容，可以将图片保存到图库中，而不管其是否丢弃？

这是我的表格（以Angular格式）：

<ng-container *ngFor="let image of imageList; let i = index;">
    <div class="mb-1" fxLayoutAlign.gt-xs="space-between" fxLayoutGap.xs="10px" fxLayout.xs="column">
        <input type="file" accept="image/*" [disabled]="image.hasOwnProperty('Id') && image?.Id" (change)="showPreview($event, img, i)" #input/>
        <img [src]="image?.url" alt="" #img class="image-limited" />
        <p *ngIf="image?.url !== ''" fxLayoutAlign.xs="center center">{{ image?.hasOwnProperty('name') ? image?.name : (form.get('AssetNumber').value || '') + '_' + (i + 1) }}</p>
        <button md-raised-button color="accent" class="delete-button" (click)="clearImage(input, img, $event, i)" [disabled]="image?.url === ''">
            <i class="fa fa-remove"></i> {{ 'ADD_EDIT_ASSET_IMAGE_DELETE_BUTTON_TEXT' | translate }}
        </button>
    </div>
    <hr class="mb-1" *ngIf="i !== imageList.length - 1" />
</ng-container>

此方法在输入更改时被调用：

showPreview(event: { target: { files: FileList, value: string } }, element: HTMLImageElement, imageIndex: number): void {
        ImageCompression.compress(event.target.files[0], this.configurationService.previewQuality)
            .then((res: File) => {
                const imageUrl: string = URL.createObjectURL(res);
                this.imageList[imageIndex].url = this.sanitizer.bypassSecurityTrustUrl(imageUrl);
                this.renderer.setAttribute(element, 'src', imageUrl);
            });
    }

Answer 1

TL; DR ：这不是预期的行为。

当您在网页中输入文件时，用户不希望保存图像。他们希望图片可以上传到页面，甚至可以上传到服务器。

已安装的应用程序具有分配的权限和内存空间。预计该应用程序将保存图像。网页不是手机中安装的应用程序，没有分配内存，也没有权限。如果网页在未经您的允许的情况下突然开始将图像保存在内存中，那么用户会发疯。

话虽如此，您确定可以拍照，然后下载到手机的内存中。但是用户可以通过下载看到它。

但是有一个问题： 您无法控制照片的来源 。用户可能会选择文件选择器并输入一个已经保存的图像，如果您下载该图像而未询问，则该用户的内存中可能有重复的文件。那肯定会让我发疯。

询问用户是否要下载它会更好。这种行为可确保在台式机或移动设备上看到的页面的一致性。但是同样，您无法控制要保存图像的位置或确定是否可以下载图像。如果以后需要这些图像，则需要用户选择这些图像并像往常一样输入它们。

Answer 2

参考this文章，我已经编写了一些代码，经过测试并且运行良好。

代码的主要功能是捕获功能，该功能获取2d上下文，然后将图像推送到要根据您的组件进行迭代的数组。我很确定您可以根据需要调整此解决方案：D

来自 some.component.ts 的

一些代码如下

public capture() {
    const context = this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, 640, 480);
    this.captures.push(this.canvas.nativeElement.toDataURL('image/png'));
}

和 some.component.html 看起来像

<div id="app">
    <div><video #video id="video" width="640" height="480" autoplay></video></div>
    <div><button id="snap" (click)="capture()">Snap Photo</button></div>
    <canvas #canvas id="canvas" width="640" height="480"></canvas>
    <ul>
        <li *ngFor="let c of captures">
            <img src="{{ c }}" height="50" />
        </li>
    </ul>
</div>

Answer 3

也许与权限有关，这个允许存储，而CAMERA可能只允许使用它：

https://developer.android.com/reference/android/Manifest.permission#WRITE_EXTERNAL_STORAGE

您的权限列表是什么？

（可能不相关，但以防万一！）

从相机拍摄的图像未保存到图库

3 个答案: