CODEWITHSUNDEEP
iosimagetitaniumappceleratortitanium-alloy
thms
thms

Reputation: 97

Titanium Alloy: Saving a View as image to the photoGallery?

So I currently have a window with a view (id="newPhoto") in which I put an image from a previous step. Onto this newPhoto-view I position a new view (id="content") via css with an icon and some text on it. Then I want to save the parent view with the image and the icon and text on it as a new image to the photoGallery. What would be the easiest way? To put all in one view and save the new view, or to screenshot the desired part and save it? Cannot make this to work :(

my filterWindow.xml file:

<Alloy>
    <Window id="filterWindow">

       <View id="finalImage" /> 
            <View id="selectedPhoto" />
            <View id="counter">
                <ImageView id="weatherIcon" />
                <Label id="label" />
            </View>

        <Button id="filterAndSaveBtn" onClick="filterAndSave">Filter</Button>

    </Window>
</Alloy>

My filterWindow.js:

var photo = Alloy.createController('photo').getView();

$.selectedPhoto.add(photo);
$.selectedPhoto.width = appWidth;
$.selectedPhoto.height = appWidth;

$.label.text = "Some text";

function filterAndSave(e) {
    var blob = $.finalImage.toBlob();
    Ti.Media.saveToPhotoGallery(blob,{
        success: function(e){
            alert('Saved image to gallery');
        },
        error: function(e){
            alert("Error trying to save the image.");
        }
    });
}

Thanks in advance for having a look at this one!

Upvotes: 2

Views: 1050

Answers (2)

thms
thms

Reputation: 97

Ok... found it. Need to Save it as a png file, otherwise it sets the background of the overlapping element white though it has a smaller height. But anyway... saving as a png works. But have only tried it in iOS.

So here is the final working code:

filterWindow.xml:

<View id="finalImage">
    <View id="selectedPhoto" />
    <View id="counter">
        <ImageView id="weatherIcon" />
        <Label id="label" />
    </View>
</View>

filterWindow.js:

var photo = Alloy.createController('photo').getView();

// adding the selected photo from the previous step into the first child-View
$.selectedPhoto.add(photo);

$.selectedPhoto.width = appWidth;
$.selectedPhoto.height = appWidth;

$.finalImage.width = appWidth;
$.finalImage.height = appWidth; 

$.label.text = "Some text";

function filterAndSave(e) {
    if (Ti.Platform.osname == "android") {
        var image = $.finalImage.toImage().media;
    } else {
        var image = $.finalImage.toImage(null, true);
    }

    //Saving the image if it is needed somewhere else
    var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "finalImage.png");
    f.write(image);

    //Save it to the gallery
    Ti.Media.saveToPhotoGallery(image,{
        success: function(e){
            alert('Saved image to gallery');
        },
        error: function(e){
            alert("Error trying to save the image.");
        }
    });
}

Once again, thanks so much for your, Robin.

Upvotes: 0

Robin Ellerkmann
Robin Ellerkmann

Reputation: 2113

I had a similar issues in one of my projects. I made a screenshot of the area I needed as the new picture.

//This should be put in your filterAndSave method
if (Ti.Platform.osname == "android") {
    var image = $.imageContainer.toImage().media;
} else {
    var image = $.imageContainer.toImage(null, true);
}

//Saving the image if it is needed somewhere else
var f = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, "finalChallengeImage.jpeg");
f.write(image);
//Save it to the gallery and do what has to be done

You should have a look at the official documentation of the toImage() function. It needs different arguments depending on the platform you are using.

Please note that I did not needed to save the image to the gallery so that must be done additionally (although it seems like you already figured out how to do this).

Upvotes: 2

Related Questions