0

I'm using two types of cordova plugin to store image into gallery and make retrieve it back.

My project based on backbone.js. But the problem is, I got this weird problem last week. The image still can't appear on the next page after I click button. I got 2 pages, first page to store image into gallery after I capture picture using camera cordova plugin. Below is my code

page 1

javascript

function onPhotoURISuccess(imageURI) {
    var largeImage = document.getElementById('image');
    largeImage.style.display = 'block';
    largeImage.src = imageURI;
    localStorage.imageUrl = imageURI;
}

html

<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button> <img id="image" name="image" src="" style=
"display:none;width:100%;" />

Then I want to retrieve back my image in my gallery using imageURI that I store into localStorage.imageUrl. I testing using hard corded imageURI, retrieve using console.log.

file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg

page 2

html

<img id="image" name="image" src="file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg" style="display:none;width:100%;" />

It didn't working.

So, I try inject imageURI into my view page (page 2) in programmatic way. I create a model and collection for imageURI so i can render it into my second page.

model

define(['underscore', 'backbone'], function(_, Backbone) {
    var linkModel = Backbone.Model.extend({
        defaults:{
            imageUrl: localStorage.imageUrl
        }
        });
    return linkModel;
});

collection

define(['underscore', 'backbone', 'model/link/linkModel'], function(_, Backbone, linkModel) {
    var linkCollection = Backbone.Collection.extend({
        model: linkModel
    });
    return linkCollection;
});

view

define(['jquery', 'underscore', 'backbone', 'model/link/linkCollection', 'text!modules/link/linkConfirmViewTemplate.html'], function($, _, Backbone, linkCollection, linkConfirmViewTemplate) {
    var LinkConfirmView = Backbone.View.extend({
        render: function() {
            var variables = {
                imageUrl: localStorage.imageUrl
            };
            var compiledTemplate = _.template(linkConfirmViewTemplate, variables);
            this.$el.html(compiledTemplate);
        }
    });
    return LinkConfirmView;
});
<img id="image" name="image" src="<%= imageUrl %>" style="display:none;width:100%;" />

I follow this site but still not working.

I already doing some research for this issue in stakeoverflow, still same.

2
  • did you manage to solve this?
    – twb
    Jun 21, 2014 at 17:14
  • yes, you can check my answer
    – Nurdin
    Jun 21, 2014 at 18:34

1 Answer 1

1

Yes, I remove display:none on my html.

<img id="image" name="image" src="" style=
"display:none;width:100%;" />

to

<img id="image" name="image" src="" style="width:100%;" />
1
  • <img id="image" name="image" src="file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg" style="width:100%;" /> so this should work? it didnt work for me...
    – twb
    Jun 22, 2014 at 5:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.