Photoswipe с base64, изображения

Question

Я занимаюсь разработкой приложения для iPad с использованием Phonegap (Cordova-1.9.0) и jQuery Mobile 1.0.1 . Мне нужно использовать галерею изображений для моего приложения. В моем приложении. Я нашел фотогалерею photoswipe. Я снимаю изображение с камеры iPad и сохраняю как Camera.DestinationType.DATA_URL (Phonegap api). Мои изображения сохраняются как base64, типа.

Галерея изображений Photoswipe работает нормально, когда я сохраняю изображение как Camera.DestinationType.FILE_URI.

Но моя проблема в том, как я могу использовать галерею photoswipe, используя Camera.DestinationType.DATA_URL?

благодарю вас

Answer 1

Я нашел решение для аналогичной проблемы.

Я использую photoSwipe с base64 на веб-странице, и это работает следующим образом:

<li><a href="data:image/png;base64,<c:out value='${entry.imagenString}'/>"><img src="data:image/png;base64,<c:out value='${entry.imagenString}'/>"></a></li>

В атрибутах href и src я поместил строку base64 с нотацией, чтобы указать, что это base64.

Я попытаюсь использовать его в PhoneGap, но я думаю, что это должен быть тот же код.

Изменить: я проверил его в PhoneGap, и он работает.

Answer 2

Я использую это:

var imagesArray = data.callback.include.images;
    // images : 
    if(imagesArray && imagesArray.length > 0  && imagesArray != null && imagesArray != undefined){
        var images = imagesArray.map((item)=>{
            var link = item.trim();
            var base = link.split('base64,');
            var a = base[0];
            var b = base[1];
            return `<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
                <a href=${a}base64,${b} itemprop="contentUrl" data-size="1024x1024">
                    <img src=${a}base64,${b} itemprop="thumbnail" alt="Image description" />
                </a>
                <figcaption itemprop="caption description">CAPTION :</figcaption>                   
            </figure>`
        })
        // building the gallery : 
        var now = new Date().getTime();
        var galleryClassName = "gal-" + shareId + "-" + commentId + "-" + now;
        var gallery = `<div class="comments-gallery ${galleryClassName} gallery" itemscope itemtype="http://schema.org/ImageGallery">
                         ${images}      
                    </div>`;
    }else { gallery = "" }

затем включите переменную галереи и затем инициализируйте ее, вызвав ее класс как

var output = `<div class="row"> ${gallery} </div>`;
 // init gallerires : 
        initPhotoSwipeFromDOM("." + galleryClassName);