Photoswipe with base64, Images

Question

I am developing an iPad application using Phonegap (Cordova-1.9.0) and jQuery Mobile 1.0.1 . I need to use image gallery for my application.In my application.I found photoswipe image gallery. I capture image from iPad camera and save as Camera.DestinationType.DATA_URL (Phonegap api ). My imagea are saved as base64, type.

Photoswipe image gallery works fine when I save image as Camera.DestinationType.FILE_URI.

But my problem is that how do i use photoswipe gallery using Camera.DestinationType.DATA_URL?

thank you

Answer 1

I found a solution for a similar problem.

I use photoSwipe with base64 in a web page, and it works this way:

<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>

In the href and src attributes I put the string of base64 with the notation to indicate that is a base64.

I'll try to use it in Phonegap, but I think that must be the same code.

Edit: I tested it in Phonegap and it works.

Answer 2

I use this :

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 = "" }

then include the gallery variable and then initialize it by calling its class as

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