Email Attachment Image is CROPPED. WHY!?! (iOS)

[sirnameless]

Hello, I smushed the PhotoPicker and ComposeEmailSMS examples together to allow a user to pick an image to upload, then email it. It seems to work perfectly, until the email UI pops up, and the image is cropped! It just shows the lower left corner. I’ve taken out all the rescaling code and it still happens. Is this a bug? (I’m testing it on an iPad Mini, uploading photos I took with the device.)

Here’s the code.

[lua]display.setStatusBar( display.HiddenStatusBar )

local widget = require “widget”
widget.setTheme( “theme_ios” )

local function onSendEmail( event )
– compose an HTML email with a picture attachment
local options =
{
to = { “john.doe@somewhere.com”, },
subject = “HELLO WORLD”,
attachment =
{
{baseDir=system.DocumentsDirectory, filename=“photo.jpg”, type=“image”},
},
}
native.showPopup(“mail”, options)
end

local function UploadPicture( event )---------------------------------------------------------------

local photo – holds the photo object
local PHOTO_FUNCTION = media.PhotoLibrary

local isXcodeSimulator = “iPhone Simulator” == system.getInfo(“model”)
if (isXcodeSimulator) then
local alert = native.showAlert( “Information”, “No Photo Library available on iOS Simulator.”, { “OK”})
end

local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bkgd:setFillColor(0, 200, 255)

local text = display.newText( “Tap to launch Photo Picker”, 0, 0, nil, 16 )
text:setTextColor( 255, 255, 255 )
text.x = display.contentCenterX
text.y = display.contentCenterY

local sessionComplete = function(event)
photo = event.target

if photo then

bkgd.x = 100000 --Hide bkgd
text.text = “”

else
bkgd.x = 100000
text.text = “No Image Selected”
text.x = display.contentCenterX
text.y = display.contentCenterY
print( “No Image Selected” )
end

g=display.newGroup()
g:insert(photo)
display.save(g, “photo.jpg”, system.DocumentDirectory)

g:toBack()

end

– Screen tap comes here to launch Photo Picker
local tapListener = function( event )
display.remove(g) – remove the previous photo object
text.text = “Select a picture …”
text.x = display.contentCenterX
text.y = display.contentCenterY

– Delay some to allow the display to refresh before calling the Photo Picker
timer.performWithDelay( 100, function() media.show( PHOTO_FUNCTION, sessionComplete )
end )
return true
end

bkgd:addEventListener( “tap”, tapListener )

end --END OF UPLOAD PICTURE FUNCTION

-----BUTTONS-----------------------------------------------------------------------

local sendEmail = widget.newButton{
top = 0, left = 0,
label = “Compose Email”,
onRelease = onSendEmail
}

sendEmail.x = display.contentWidth * 0.5
sendEmail.y = display.contentHeight - 100

local uploadPhotoButton = widget.newButton{
top = 0, left = 0,
label = “Upload Picture”,
onRelease = UploadPicture
}

uploadPhotoButton.x = display.contentWidth * 0.5
uploadPhotoButton.y = display.contentHeight - 156[/lua] [import]uid: 191140 topic_id: 34804 reply_id: 334804[/import]

[rob]

Can you put the scaling code back in and repost this? [import]uid: 199310 topic_id: 34804 reply_id: 138416[/import]

[sirnameless]

I could but why? The issue happens without it - are you not seeing it? Maybe I’ll have to try it on other devices. [import]uid: 191140 topic_id: 34804 reply_id: 138419[/import]

[rob]

The images from the camera and most likely from the photo library are huge. I suspect it’s showing them full res which is why they are messed up. I want to see your scaling code to make sure its scaling down.

Right now, you’re capturing the bounds of the screen. The photo you’re loading is larger than the screen and your photo.jpg is only that part of the screen that’s getting captured. I was messing around with other ways to capture the image, but I’ve not had luck getting any more than the screen itself.

I don’t know of a way to capture something bigger than the screen. If you scale the image down until it fits within the screen your code should work. [import]uid: 199310 topic_id: 34804 reply_id: 138430[/import]

[sirnameless]

Okay, you are correct. I’m not sure how to fix that, though. It’s odd, because using this code, the photo presents itself in the app perfectly, but then in the email (or even in the sandbox), it’s cropped.

[lua]display.setStatusBar( display.HiddenStatusBar )

local widget = require “widget”
widget.setTheme( “theme_ios” )

local function onSendEmail( event )
– compose an HTML email with a picture attachment
local options =
{
to = { “john.doe@somewhere.com”, },
subject = “HELLO WORLD”,
attachment =
{
{baseDir=system.DocumentsDirectory, filename=“photo.jpg”, type=“image”},
},
}
native.showPopup(“mail”, options)
end

local function UploadPicture( event )---------------------------------------------------------------

local photo – holds the photo object
local PHOTO_FUNCTION = media.PhotoLibrary

local isXcodeSimulator = “iPhone Simulator” == system.getInfo(“model”)
if (isXcodeSimulator) then
local alert = native.showAlert( “Information”, “No Photo Library available on iOS Simulator.”, { “OK”})
end

local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bkgd:setFillColor(0, 200, 255)

local text = display.newText( “Tap to launch Photo Picker”, 0, 0, nil, 16 )
text:setTextColor( 255, 255, 255 )
text.x = display.contentCenterX
text.y = display.contentCenterY

local sessionComplete = function(event)
photo = event.target

if photo then

–RESIZE THE IMAGE
local maxheight = 200
local maxwidth = 200

local multiplier_height = maxheight / photo.height
local multiplier_width = maxwidth / photo.width

local width = nil
local height = nil

if multiplier_height > multiplier_width then
width = photo.width * multiplier_height
height = photo.height * multiplier_height
else
width = photo.width * multiplier_width
height = photo.height * multiplier_width
end

if width > maxwidth then
multiplier_width = maxwidth / width

width = maxwidth
height = height * multiplier_width
end

if height > maxheight then

multiplier_height = maxheight / height

height = maxheight
width = width * multiplier_height
end

width = math.floor(width)
height = math.floor(height)

photo.width = width
photo.height = height
– THE IMAGE IS RESIZED!

bkgd.x = 100000 --Hide bkgd
text.text = “”

else
bkgd.x = 100000
text.text = “No Image Selected”
text.x = display.contentCenterX
text.y = display.contentCenterY
print( “No Image Selected” )
end

g=display.newGroup()
g:insert(photo)
display.save(g, “photo.jpg”, system.DocumentDirectory)
photo.x = display.contentCenterX
photo.y = display.contentCenterY / 2
end

– Screen tap comes here to launch Photo Picker
local tapListener = function( event )
display.remove(g) – remove the previous photo object
text.text = “Select a picture …”
text.x = display.contentCenterX
text.y = display.contentCenterY

– Delay some to allow the display to refresh before calling the Photo Picker
timer.performWithDelay( 100, function() media.show( PHOTO_FUNCTION, sessionComplete )
end )
return true
end

bkgd:addEventListener( “tap”, tapListener )

end --END OF UPLOAD PICTURE FUNCTION

-----BUTTONS-----------------------------------------------------------------------

local sendEmail = widget.newButton{
top = 0, left = 0,
label = “Compose Email”,
onRelease = onSendEmail
}

sendEmail.x = display.contentWidth * 0.5
sendEmail.y = display.contentHeight - 100

local uploadPhotoButton = widget.newButton{
top = 0, left = 0,
label = “Upload Picture”,
onRelease = UploadPicture
}

uploadPhotoButton.x = display.contentWidth * 0.5
uploadPhotoButton.y = display.contentHeight - 156[/lua] [import]uid: 191140 topic_id: 34804 reply_id: 138461[/import]

[rob]

I’m not sure about the safety of resizing the image by changing it’s width. You probably should be calculating a scaling factor

scaleFactor = maxWidth / photo.width
photo:scale(scaleFactor,scaleFactor)

and see if that change’s the real width. [import]uid: 199310 topic_id: 34804 reply_id: 138524[/import]

[sirnameless]

I tried it… still getting the same error, unfortunately. Tried it on an iPad as well as an iPad Mini. Your way is much simpler, though, so my code is cleaned up a bit now. [import]uid: 191140 topic_id: 34804 reply_id: 138836[/import]

[rob]

Can you put the scaling code back in and repost this? [import]uid: 199310 topic_id: 34804 reply_id: 138416[/import]

[sirnameless]

I could but why? The issue happens without it - are you not seeing it? Maybe I’ll have to try it on other devices. [import]uid: 191140 topic_id: 34804 reply_id: 138419[/import]

[rob]

The images from the camera and most likely from the photo library are huge. I suspect it’s showing them full res which is why they are messed up. I want to see your scaling code to make sure its scaling down.

Right now, you’re capturing the bounds of the screen. The photo you’re loading is larger than the screen and your photo.jpg is only that part of the screen that’s getting captured. I was messing around with other ways to capture the image, but I’ve not had luck getting any more than the screen itself.

I don’t know of a way to capture something bigger than the screen. If you scale the image down until it fits within the screen your code should work. [import]uid: 199310 topic_id: 34804 reply_id: 138430[/import]

[sirnameless]

Okay, you are correct. I’m not sure how to fix that, though. It’s odd, because using this code, the photo presents itself in the app perfectly, but then in the email (or even in the sandbox), it’s cropped.

[lua]display.setStatusBar( display.HiddenStatusBar )

local widget = require “widget”
widget.setTheme( “theme_ios” )

local function onSendEmail( event )
– compose an HTML email with a picture attachment
local options =
{
to = { “john.doe@somewhere.com”, },
subject = “HELLO WORLD”,
attachment =
{
{baseDir=system.DocumentsDirectory, filename=“photo.jpg”, type=“image”},
},
}
native.showPopup(“mail”, options)
end

local function UploadPicture( event )---------------------------------------------------------------

local photo – holds the photo object
local PHOTO_FUNCTION = media.PhotoLibrary

local isXcodeSimulator = “iPhone Simulator” == system.getInfo(“model”)
if (isXcodeSimulator) then
local alert = native.showAlert( “Information”, “No Photo Library available on iOS Simulator.”, { “OK”})
end

local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
bkgd:setFillColor(0, 200, 255)

local text = display.newText( “Tap to launch Photo Picker”, 0, 0, nil, 16 )
text:setTextColor( 255, 255, 255 )
text.x = display.contentCenterX
text.y = display.contentCenterY

local sessionComplete = function(event)
photo = event.target

if photo then

–RESIZE THE IMAGE
local maxheight = 200
local maxwidth = 200

local multiplier_height = maxheight / photo.height
local multiplier_width = maxwidth / photo.width

local width = nil
local height = nil

if multiplier_height > multiplier_width then
width = photo.width * multiplier_height
height = photo.height * multiplier_height
else
width = photo.width * multiplier_width
height = photo.height * multiplier_width
end

if width > maxwidth then
multiplier_width = maxwidth / width

width = maxwidth
height = height * multiplier_width
end

if height > maxheight then

multiplier_height = maxheight / height

height = maxheight
width = width * multiplier_height
end

width = math.floor(width)
height = math.floor(height)

photo.width = width
photo.height = height
– THE IMAGE IS RESIZED!

bkgd.x = 100000 --Hide bkgd
text.text = “”

else
bkgd.x = 100000
text.text = “No Image Selected”
text.x = display.contentCenterX
text.y = display.contentCenterY
print( “No Image Selected” )
end

g=display.newGroup()
g:insert(photo)
display.save(g, “photo.jpg”, system.DocumentDirectory)
photo.x = display.contentCenterX
photo.y = display.contentCenterY / 2
end

– Screen tap comes here to launch Photo Picker
local tapListener = function( event )
display.remove(g) – remove the previous photo object
text.text = “Select a picture …”
text.x = display.contentCenterX
text.y = display.contentCenterY

– Delay some to allow the display to refresh before calling the Photo Picker
timer.performWithDelay( 100, function() media.show( PHOTO_FUNCTION, sessionComplete )
end )
return true
end

bkgd:addEventListener( “tap”, tapListener )

end --END OF UPLOAD PICTURE FUNCTION

-----BUTTONS-----------------------------------------------------------------------

local sendEmail = widget.newButton{
top = 0, left = 0,
label = “Compose Email”,
onRelease = onSendEmail
}

sendEmail.x = display.contentWidth * 0.5
sendEmail.y = display.contentHeight - 100

local uploadPhotoButton = widget.newButton{
top = 0, left = 0,
label = “Upload Picture”,
onRelease = UploadPicture
}

uploadPhotoButton.x = display.contentWidth * 0.5
uploadPhotoButton.y = display.contentHeight - 156[/lua] [import]uid: 191140 topic_id: 34804 reply_id: 138461[/import]

[rob]

I’m not sure about the safety of resizing the image by changing it’s width. You probably should be calculating a scaling factor

scaleFactor = maxWidth / photo.width
photo:scale(scaleFactor,scaleFactor)

and see if that change’s the real width. [import]uid: 199310 topic_id: 34804 reply_id: 138524[/import]

[sirnameless]

I tried it… still getting the same error, unfortunately. Tried it on an iPad as well as an iPad Mini. Your way is much simpler, though, so my code is cleaned up a bit now. [import]uid: 191140 topic_id: 34804 reply_id: 138836[/import]