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

【问题标题】：Image taken from camera not saved to gallery从相机拍摄的图像未保存到图库
【发布时间】：2018-07-06 13:39:17
【问题描述】：

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

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

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

【问题讨论】：

尝试用短信做同样的事情。您将得到相同的结果 - 图像不会保存到图库，只会保存到短信中。与备忘录或笔记应用程序相同。您是否有任何理由相信您在浏览器中运行的应用程序的行为会与手机其余时间的行为方式不同？（我当然不会！）
能提供给我们HTML相关的component.ts吗？
@KLTR 添加了代码。

标签： javascript angular html android-camera media

【解决方案1】：

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

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

已安装的应用程序具有分配给它的权限和内存空间。预计该应用程序将保存图像。网页不是手机中安装的应用程序，它没有分配内存，也没有权限。如果一个网页突然开始在未经许可的情况下将图像保存在他们的内存中，用户会很生气。

话虽如此，你肯定可以拍张照片然后下载到手机内存中。但用户会将其视为它，作为一个下载。

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

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

【讨论】：

【解决方案2】：

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

代码的主要功能是捕获功能，它获取二维上下文，然后根据您的组件将图像推送到您正在迭代的数组。我很确定您将能够根据您的需要调整此解决方案：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>

【讨论】：

【解决方案3】：

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

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

您的权限列表是什么？

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

【讨论】：