Arhn - архитектура программирования

Установите фоновое изображение во время выполнения после использования плагина камеры - ionic3

Я хочу установить фоновое изображение для моего ионного содержимого. Я хотел бы добавить его с помощью background-image: url('../assets/imgs/my_image.jpg') в CSS, но я хочу, чтобы изображение загружалось от пользователя с помощью камеры cordova-plugin. Как вы знаете, с помощью этого плагина я могу сделать снимок камерой или загрузить его из галереи, я даже могу отобразить его в HTML, но я понятия не имею, как установить фон с этим изображением. я пытался

.content
{
    background-image: {{ myItem.photo }};
}

Но очевидно, что это не работает.

Кто-нибудь может решить эту проблему? заранее спасибо

Вот как я загружаю изображение:

HTML:

<button ion-button (click)="presentActionSheet()">
     Choose photo
</button>

TS:

public presentActionSheet()
{
    let actionSheet = this.actionSheetCtrl.create({
        buttons: [
            {
                text: 'Load from gallery',
                handler: () =>
                {
                    this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
                }
            },
            {
                text: 'Take picture',
                handler: () =>
                {
                    this.takePicture(this.camera.PictureSourceType.CAMERA);
                }
            },
            {
                text: 'Cancel',
                role: 'cancel'
            }
        ]
    });
    actionSheet.present();
}

public takePicture(sourceType)
{
    // Create options for the Camera Dialog
    var options = {
        quality: 60,
        sourceType: sourceType,
        targetHeight: 500,
        targetWidth: 500,
        mediaType: this.camera.MediaType.PICTURE,
        encodingType: this.camera.EncodingType.JPEG,
        saveToPhotoAlbum: false,
        allowEdit: true
    };
    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) =>
    {
        // Special handling for Android library
        if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY)
        {
            this.filePath.resolveNativePath(imagePath).then(filePath =>
            {
                let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
                let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
                this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
            });
        }
        else
        {
            let currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
            let correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
            this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        }
    }, (err) =>
    {
        this.presentToast('Error');
    });
}

// Create a new name for the image
private createFileName()
{
    var d = new Date(),
        n = d.getTime(),
        newFileName = n + ".jpg";
    return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName)
{
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success =>
    {
        this.myItem.photo = newFileName;
    }, error =>
    {
        this.presentToast('Error');
    });
}

  • вы можете показать функцию для загрузки изображения 18.06.2018
  • Я добавил функции 18.06.2018

Ответы:


1

Вместо:

.content
{
    background-image: {{ myItem.photo }};
}

Используйте [style.background]:

<div class="content" [style.background]="'url('+myItem.photo+')'"></div>

TS (компонент)

ngOnInit(){
   this.myItem.photo ="your first url or empty string";
}
//Here you already set the url
private copyFileToLocalDir(namePath, currentName, newFileName)
{
    this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success =>
    {
        this.myItem.photo = newFileName;
    }, error =>
    {
        this.presentToast('Error');
    });
}
18.06.2018
  • @AlessioF скажи мне, если это поможет 18.06.2018
  • Спасибо за ответ, но это не решило проблему 18.06.2018
  • посмотри мой ответ, он отлично работает: фон, нажав кнопку"> stackoverflow.com/questions/50906839/ 18.06.2018
  • ты можешь объяснить, что ты делаешь? 18.06.2018
  • Если фотографии нет, отображается установленная мной по умолчанию (но не с правильным размером, кажется, не читается «размер фона: содержит»), но если есть фотография (я просто сделал console.log, чтобы быть уверенным и это как 1529326905450.jpg) он не отображает фото ... просто черный 18.06.2018
  • Я пытался вставить [style.background]='url('+myItem.photo+')' в ‹div› и в ‹ion-content›... единственная разница в том, что в ‹div› экран белый и первая фотография не отображается, тогда как в ‹ion-content› первая фотография отображается с неправильным размером, и если я изменяю эту фотографию (загружаю новую, как писалось ранее), отображается черный экран 18.06.2018
  • Вы сохраняете фото, загруженное на замок? 19.06.2018
  • То, как я управляю фотографиями, это все вышеперечисленное, не более того. Я думал, что сохранил их с помощью функции copyFileToLocalDir, но вы заставляете меня думать, что я сделал ошибку. Как я должен сохранить их локально? 19.06.2018
  • как я вижу здесь: cordova.apache.org/docs/ en/latest/reference/ вы загружаете изображение в тег. Я прав? 19.06.2018
  • Я не могу понять, что это значит, извините :/ 19.06.2018
  • что вы получаете в imagePath после загрузки 19.06.2018
  • Я только что сделал console.log после this.camera.getPicture(options).then((imagePath) =>..., чтобы увидеть imagePath, и это выглядит так: 19.06.2018
  • отлично, это URL-адрес, поэтому установите его в параметре, который вы используете в <div class="content" [style.background]="'url('+myItem.photo+')'"></div> 19.06.2018
  • Я понял! Ваше редактирование не является правильным способом. Я только что сделал это: <div class="content" [style.background]="'url('+pathForImage(myItem.photo)+')'"></div>, где pathForImage определяется только этот возврат: return normalizeURL(cordova.file.dataDirectory + img);. Единственная проблема заключается в том, что свойство CSS, такое как background-size: contain, не соблюдается... похоже, его не читают 19.06.2018
  • Я возвращаюсь к предыдущей версии, и я очень благодарен, если вы проголосуете и отметите как ответ 19.06.2018
  • Я буду, большое спасибо. И если у вас есть какие-либо идеи о том, как установить такой фон с помощью CSS, я буду признателен. 19.06.2018
  • он предпочитает делать это таким образом 19.06.2018
  • потому что не все браузеры поддерживают переменные:developer.mozilla.org/en-US /docs/Web/CSS/Использование_CSS_переменных 19.06.2018
  • Я буду, ты был так терпелив. Большое спасибо 19.06.2018
  • Рад был помочь :) 19.06.2018
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..