Изображение с камеры не сохранено в галерее - PullRequest
Новая
       7

Изображение с камеры не сохранено в галерее

0 голосов
/ 06 июля 2018

Я реализую простую форму загрузки изображений.Когда на телефоне у пользователя есть возможность сделать фотографию с помощью камеры и загрузить ее.

По какой-то причине снимок, сделанный таким образом, не сохраняется в галерее.

Есть личто-то отсутствует в объявлении HTML, чтобы позволить картинке быть сохраненной в галерее, независимо от того, была ли она отброшена или использована?

Это моя форма (на английском языке): 

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

Ответы [ 3 ]

0 голосов
/ 12 июля 2018

TL; DR : Не соответствует ожидаемому поведению.

Когда вы вводите файл на веб-странице, пользователь не ожидает, что изображение будет сохранено. Они ожидают, что изображение будет загружено на страницу и, возможно, на сервер.

У установленного приложения есть разрешения и выделенное ему пространство памяти. Ожидается, что приложение сохранит изображение. Веб-страница не является приложением, установленным в телефоне, у нее нет выделенной памяти и нет разрешений. Пользователи разозлятся, если веб-страница внезапно начнет сохранять изображения в своей памяти без разрешения.

Сказав это, вы обязательно можете сделать фотографию, а затем загрузить ее в память телефона. Но пользователь увидит это как .

Но есть проблема: вы не контролируете, откуда идет фотография . Пользователь может выбрать средство выбора файлов и ввести уже сохраненное изображение, если вы загружаете его без запроса, то у пользователя могут быть дубликаты файлов в его памяти. Это наверняка свело бы меня с ума.

Лучше спросить пользователя, хотят ли они его скачать. Такое поведение обеспечивает согласованность страницы, видимой на рабочем столе или мобильном устройстве Но опять же, вы не контролируете, где будут сохраняться изображения или будут ли загружены изображения наверняка. Если вам понадобятся изображения для последующего использования, вам нужно, чтобы пользователь выбрал эти изображения и ввел их как обычно.

0 голосов
/ 16 июля 2018

Обращаясь к этой статье, я сделал некоторый код, протестирован и работает довольно хорошо.

Основная функция кода - это функция захвата, которая получает 2-мерный контекст, а затем помещает изображение в массив, по которому вы выполняете итерацию, с учетом вашего компонента. Я уверен, что вы сможете адаптировать это решение под свои нужды: 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>
0 голосов
/ 12 июля 2018

Может быть, это связано с разрешениями, этот позволяет хранить, в то время как CAMERA, вероятно, только позволяет использовать его:

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

Какой у вас список разрешений?

(Возможно, это не связано, но на всякий случай!)

...