Show Image From Internet HTML5

Beta Testing HTML5
#1

HI

How can i show an image from the internet with html5 build rather than from the

file directory.

local function networkListener( event )
             if ( event.isError ) then
                 print( "Network error - download failed: ", event.response )
             elseif ( event.phase == “began” ) then
                 print( “Progress Phase: began” )
             elseif ( event.phase == “ended” ) then
                 print( “Displaying response image file” )
                 myImage = display.newImage( event.response.filename, event.response.baseDirectory, display.contentCenterX, 700 )
             end
         end

local params = {}
params.progress = true

 
network.download(
    "http://docs.coronalabs.com/images/simulator/image-mask-base2.png",
    “GET”,
    networkListener,
    params,
    “helloCopy.png”,
    system.TemporaryDirectory
)
 

#2

– Method 2: use display.loadRemoteImage() to get the file and create a display object in one step

local myImage2

local function networkListener2( event )

if ( event.isError ) then

print ( “Network error - download failed” )

else

myImage2 = event.target

myImage2.alpha = 0

transition.to( myImage2, { alpha = 1.0 } )

end

print ( "RESPONSE: ", event.response.filename )

end

display.loadRemoteImage( 

"https://developer.coronalabs.com/demo/hello.png", 

“GET”, 

networkListener2, 

“helloCopy2.png”, 

system.TemporaryDirectory, 

centerX, _H / 3 * 2 + 30 )

#3

Hi,

thankyou for your help,

the code below works fine locally to display image but when i upload to server it shows error in downloading.

in order to show image from internet to my html5 program do i need to put image in memory rather than download

if this is the case how can i put image into my html5 program memory in order to display image

local function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
        local myText = display.newText( “Network error - download failed”, 300, 200, native.systemFont, 30 )

    else
        event.target.alpha = 0
        transition.to( event.target, { alpha = 1.0 } )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end

display.loadRemoteImage( “https://developer.coronalabs.com/demo/hello.png”, “GET”, networkListener, “coronalogogrey.png”, system.TemporaryDirectory, 50, 50 )
 

#4

>> it shows error in downloading.

what’s error message ? probably it related to CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

#5

hi

i get the download error

print ( “Network error - download failed” )

http://www.qurantour.com/net-out/Image-Show/index.html

the code gives this error as in pic

ocal function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
        local myText = display.newText( “Network error - download failed”, 300, 200, native.systemFont, 30 )

    else
        event.target.alpha = 0
        transition.to( event.target, { alpha = 1.0 } )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end

display.loadRemoteImage( “https://developer.coronalabs.com/demo/hello.png”, “GET”, networkListener, “coronalogogrey.png”, system.TemporaryDirectory, 50, 50 )

#6

you need to open browser console to view errors, here’s one of the ways

https://documentation.concrete5.org/tutorials/how-open-browser-console-view-errors

#7

hi

in Browser console i get the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://developer.coronalabs.com/demo/hello.png. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘monetize.coronalabs.com/’).[Learn More]

can i get around this to get this page working,

#8

look at https://forums.coronalabs.com/topic/72088-getting-started-with-html5/page-2?hl=cors#entry377770

#9

– Method 2: use display.loadRemoteImage() to get the file and create a display object in one step

local myImage2

local function networkListener2( event )

if ( event.isError ) then

print ( “Network error - download failed” )

else

myImage2 = event.target

myImage2.alpha = 0

transition.to( myImage2, { alpha = 1.0 } )

end

print ( "RESPONSE: ", event.response.filename )

end

display.loadRemoteImage( 

"https://developer.coronalabs.com/demo/hello.png", 

“GET”, 

networkListener2, 

“helloCopy2.png”, 

system.TemporaryDirectory, 

centerX, _H / 3 * 2 + 30 )

#10

Hi,

thankyou for your help,

the code below works fine locally to display image but when i upload to server it shows error in downloading.

in order to show image from internet to my html5 program do i need to put image in memory rather than download

if this is the case how can i put image into my html5 program memory in order to display image

local function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
        local myText = display.newText( “Network error - download failed”, 300, 200, native.systemFont, 30 )

    else
        event.target.alpha = 0
        transition.to( event.target, { alpha = 1.0 } )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end

display.loadRemoteImage( “https://developer.coronalabs.com/demo/hello.png”, “GET”, networkListener, “coronalogogrey.png”, system.TemporaryDirectory, 50, 50 )
 

#11

>> it shows error in downloading.

what’s error message ? probably it related to CORS, https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

#12

hi

i get the download error

print ( “Network error - download failed” )

http://www.qurantour.com/net-out/Image-Show/index.html

the code gives this error as in pic

ocal function networkListener( event )
    if ( event.isError ) then
        print ( “Network error - download failed” )
        local myText = display.newText( “Network error - download failed”, 300, 200, native.systemFont, 30 )

    else
        event.target.alpha = 0
        transition.to( event.target, { alpha = 1.0 } )
    end
 
    print ( "event.response.fullPath: ", event.response.fullPath )
    print ( "event.response.filename: ", event.response.filename )
    print ( "event.response.baseDirectory: ", event.response.baseDirectory )
end

display.loadRemoteImage( “https://developer.coronalabs.com/demo/hello.png”, “GET”, networkListener, “coronalogogrey.png”, system.TemporaryDirectory, 50, 50 )

#13

you need to open browser console to view errors, here’s one of the ways

https://documentation.concrete5.org/tutorials/how-open-browser-console-view-errors

#14

hi

in Browser console i get the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://developer.coronalabs.com/demo/hello.png. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘monetize.coronalabs.com/’).[Learn More]

can i get around this to get this page working,

#15

look at https://forums.coronalabs.com/topic/72088-getting-started-with-html5/page-2?hl=cors#entry377770