Screenshot Save + Share

[hi11]

Hi All-

I am trying to make it so that when a user goes to share their score (through the iOS native share menu), a screenshot is taken prior to the share menu opening so that an image of the screen (with the score) can be posted/shared.

However, for some reason the screenshot is not working at all when trying to post.  I am able to get a normal image (already established in the file structure to work), but not a screenshot.  I have read through all the documentation and have tried many different options, however I have not been able to get one working.

Here’s my code:

local popupListener = {} function popupListener:popup( event ) print( "(name, type, activity, action):", event.name, event.type, tostring(event.activity), tostring(event.action) ) end local itemsToShare = { { type = "image", value = { filename = "screenshot", baseDir=system.ResourceDirectory } }, { type = "string", value = "textline1" }, { type = "string", value = "textline2" }, } local options = { items=itemsToShare, listener=popupListener } local social\_share = display.newImage( "share.png" ) local function shareTap( event ) display.captureScreen( true, { filename="screenshot", baseDir=system.ResourceDirectory } ) -- I have also tried to execute the popup on a delay to allow the screenshot to "process", however that did not work either native.showPopup( "activity", options ) return true end

Thanks–

[thinkstormllc]

Has anyone been able to get this to work? The above code does not work with CoronaSDK 2016.2943 on iOS9.3.5. The ‘textline1’ and ‘textline2’ appear, but the screenshot does not.

[rob]

In looking at the code I see a couple of issues.  There are references to system.ResourceDirectory. This is a read-only folder where your App Bundle. Unless you ship your app with a screen shot (unlikely), thats not going to work. If you’re generating the screen shot through some user action, then you’re either saving it in system.DocumentsDirectory or system.TemporaryDirectory (and maybe system.CachesDirectory). You have to find the file in the right place.

Also in the code above the screen shot is just named “screenshot”. This has to match what you save the screen shot as. It has no extension on it. You should be specifying a .png or .jpg on the end of the screen shot so we know what format to write the image out as. And that extension should be part of the file name when you go to share it.

Rob

[thinkstormllc]

Thank you for the quick response. I changed it to ‘screenshot.jpg’ and then tried capturing and retrieving from system.DocumentsDirectory, system.TemporaryDirectory and system.CachesDirectory. I did not have any luck with any of these.

The only thing that looks promising is that I am seeing the screenshot stored in the Photos app. So we are halfway there!

Any further assistance would be greatly appreciated.

[rob]

It sounds like you’re using a save function that saves to the photo library as opposed to one that saves to your sandbox. You want display.save():   https://docs.coronalabs.com/api/library/display/save.html

Rob

[thinkstormllc]

Hello, I also tried using display.save() , but it is not working.

Can you let me know how to modify this code so that it works?

I want to call function ‘shareTap’ when a share button is pressed, and then have it do ‘showPopup’ that includes the lines of text and the screenshot (to be shared on Twitter, Facebook, etc…)

Thanks!

local popupListener = {}

function popupListener:popup( event )

    print(

        “(name, type, activity, action):”, 

        event.name, event.type, tostring(event.activity), tostring(event.action)

    )

end

local itemsToShare = {

    {

        type = “image”,

        value = { filename = “screenshot.jpg”, baseDir=system.DocumentsDirectory }

    },

    {

    type = “string”, value = “textline1”

    },

    {

    type = “string”, value = “textline2”

    },

}

local options = { items=itemsToShare, listener=popupListener }

local function shareTap( event )

display.save( group, options )

    native.showPopup( “activity”, options )

return true

end

[rob]

You are using a table named options for both display.save and native.showPopup. They both need their own options table.

local itemsToShare = {     {         type = "image",         value = { filename = "screenshot.jpg", baseDir=system.DocumentsDirectory }     },     {          type = "string", value = "textline1"     },     {         type = "string", value = "textline2"     }, } local shareOptions = { items=itemsToShare, listener=popupListener } local saveOptions = { filename="screenshot.jpg", baseDir=system.DocumentsDirectory, captureOffscreenArea=true, backgroundColor={0,0,0,0} } local function shareTap( event )     display.save( group, saveOptions )     native.showPopup( "activity", shareOptions )     return true end

or something like that.

Rob

[thinkstormllc]

Thanks Rob, it worked great! The only problem I’m having now is that I’m trying to add a ‘native.newTextBox()’ to the group in order to share it.

When I call ‘showPopup’ it shows other items in the group (Such as an image that was created with display.newImage() ), but I do not see the text box I created with text inside (even though it appears on the screen before sharing).

Is there a way to include the native.newTextBox() in the group for sharing?

[rob]

native.* API calls are not part of our OpenGL canvas. They sit on top of it. Things like display.save(), display.captureScreen() etc. can only see the OpenGL portion of the screen. There is no way to get a full screen-screens shot currently.

Rob

[thinkstormllc]

Has anyone been able to get this to work? The above code does not work with CoronaSDK 2016.2943 on iOS9.3.5. The ‘textline1’ and ‘textline2’ appear, but the screenshot does not.

[rob]

In looking at the code I see a couple of issues.  There are references to system.ResourceDirectory. This is a read-only folder where your App Bundle. Unless you ship your app with a screen shot (unlikely), thats not going to work. If you’re generating the screen shot through some user action, then you’re either saving it in system.DocumentsDirectory or system.TemporaryDirectory (and maybe system.CachesDirectory). You have to find the file in the right place.

Also in the code above the screen shot is just named “screenshot”. This has to match what you save the screen shot as. It has no extension on it. You should be specifying a .png or .jpg on the end of the screen shot so we know what format to write the image out as. And that extension should be part of the file name when you go to share it.

Rob

[thinkstormllc]

Thank you for the quick response. I changed it to ‘screenshot.jpg’ and then tried capturing and retrieving from system.DocumentsDirectory, system.TemporaryDirectory and system.CachesDirectory. I did not have any luck with any of these.

The only thing that looks promising is that I am seeing the screenshot stored in the Photos app. So we are halfway there!

Any further assistance would be greatly appreciated.

[rob]

It sounds like you’re using a save function that saves to the photo library as opposed to one that saves to your sandbox. You want display.save():   https://docs.coronalabs.com/api/library/display/save.html

Rob

[thinkstormllc]

Hello, I also tried using display.save() , but it is not working.

Can you let me know how to modify this code so that it works?

I want to call function ‘shareTap’ when a share button is pressed, and then have it do ‘showPopup’ that includes the lines of text and the screenshot (to be shared on Twitter, Facebook, etc…)

Thanks!

local popupListener = {}

function popupListener:popup( event )

    print(

        “(name, type, activity, action):”, 

        event.name, event.type, tostring(event.activity), tostring(event.action)

    )

end

local itemsToShare = {

    {

        type = “image”,

        value = { filename = “screenshot.jpg”, baseDir=system.DocumentsDirectory }

    },

    {

    type = “string”, value = “textline1”

    },

    {

    type = “string”, value = “textline2”

    },

}

local options = { items=itemsToShare, listener=popupListener }

local function shareTap( event )

display.save( group, options )

    native.showPopup( “activity”, options )

return true

end

[rob]

You are using a table named options for both display.save and native.showPopup. They both need their own options table.

local itemsToShare = {     {         type = "image",         value = { filename = "screenshot.jpg", baseDir=system.DocumentsDirectory }     },     {          type = "string", value = "textline1"     },     {         type = "string", value = "textline2"     }, } local shareOptions = { items=itemsToShare, listener=popupListener } local saveOptions = { filename="screenshot.jpg", baseDir=system.DocumentsDirectory, captureOffscreenArea=true, backgroundColor={0,0,0,0} } local function shareTap( event )     display.save( group, saveOptions )     native.showPopup( "activity", shareOptions )     return true end

or something like that.

Rob

[thinkstormllc]

Thanks Rob, it worked great! The only problem I’m having now is that I’m trying to add a ‘native.newTextBox()’ to the group in order to share it.

When I call ‘showPopup’ it shows other items in the group (Such as an image that was created with display.newImage() ), but I do not see the text box I created with text inside (even though it appears on the screen before sharing).

Is there a way to include the native.newTextBox() in the group for sharing?

[rob]

native.* API calls are not part of our OpenGL canvas. They sit on top of it. Things like display.save(), display.captureScreen() etc. can only see the OpenGL portion of the screen. There is no way to get a full screen-screens shot currently.

Rob