从相机拍摄的照片未保存到相册

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);
            });
    }

- EldarGranulo

---

尝试使用文本消息进行相同的操作。您将获得相同的结果-图像不会保存到画廊中，而只会保存到文本消息中。备忘录或笔记应用程序也是如此。您有任何理由相信您在浏览器中运行的应用程序会以与手机其余时间不同的方式运行吗？（我肯定没有！） - enhzflep

你能提供与HTML相关的component.ts吗？ - KLTR

@KLTR 已添加代码。 - EldarGranulo

Answer 1

当用户在网页中输入文件时，他们不希望图片被保存。他们希望将图片上传到页面上，可能还会上传到服务器上。

安装的应用程序具有分配给它的权限和内存空间。人们期望应用程序会保存图像。网页不是安装在手机上的应用程序，它没有分配的内存，也没有权限。如果网页突然开始在用户的内存中保存图像，而没有得到他们的许可，用户会感到很生气。

话虽如此，你确实可以拍照，然后将其下载到手机的内存中。但用户会将其视为下载。

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

询问用户是否要下载会更好。这种行为可以确保桌面或移动设备上看到的页面一致性。但同样地，你无法控制图像将保存在哪里，或者是否一定会下载图像。如果你需要稍后使用这些图像，你需要让用户像通常一样选择这些图像并输入它们。

- Nery Ortez

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>

- ifeelmyself

Answer 3

也许这与权限有关，其中一个允许存储，而相机权限可能仅允许使用它。

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

你的权限列表是什么？

（可能与此无关，但以防万一！）

- zelda11