Save Canvas to Local

Beta Testing HTML5
#1

Hi,

  How to save the group as image in HTML5. it works well in device { display.save, display.capture… }. in browser nothing works. So I created a JS to Capture HTML Canvas as Image. But it was just black colour image nothing in it.

var canvas = document.getElementById(“canvas”);

var datai = canvas.toDataURL(“image/png”);

var save_link = document.createElement(‘a’);

save_link.href = datai;

save_link.download = “test.png”;

var event = new MouseEvent(‘click’,{“bubbles”:false, “cancelable”:false});

save_link.dispatchEvent(event);

Thanks

#2

the following test works for me:

local myObject1 = display.newRect( 150, 150, 100, 150 )  – Create a rectangle object

local myObject2 = display.newCircle( 100, 300, 50 )    – Create a circle object

local myObject3 = display.newImage(‘wall.png’)    – Create an image

local group = display.newGroup()

  

group:insert( myObject1 )

group:insert( myObject2 )

group:insert( myObject3 )

display.save( group, { filename=“entireGroup.png”, baseDir=system.DocumentsDirectory, captureOffscreenArea=true, backgroundColor={0,0,0,0} } )

local im=display.newImage(“entireGroup.png”, system.DocumentsDirectory, 211, 211)

im:scale(0.5,0.5)

#3

@simeonaronk can you provide a simple test app which demonstrates the issue ?

#4

Hi, Thanks for the code.

I tried that too. Do you know the Documents Folder location of browser?

I want to save the image to Desktop or Documents or Download folder.

#5

My app is for kids.

In that they have a option to save the screen to their gallery.

it works well on device, But in HTML5 it doesn’t

#6

For security reasons html5 app saves files in file sandbox. 

>>Do you know the Documents Folder location of browser?

It isn’t easy to inspect and depends on browser and OS

https://stackoverflow.com/questions/21213397/where-is-the-file-sandbox-for-a-chrome-app

>>I want to save the image to Desktop or Documents or Download folder.

I believe this way will work on all browsers

  1. upload a saved image to a server

  2. download it from server to Desktop or Documents or Download or any other folder.

#7

Thanks for the tip.

But I tried to save Canvas element as Image(Screenshot).

It works, The problem is I got Plain black image.

#8

Corona uses WebGL canvas. 

https://stackoverflow.com/questions/45221542/html-save-webgl-canvas-as-image

#9

I tried it. But it doesn’t works.

Please help me through code. I’m new to HTML5.

#10

Hoping soon we will implement a function to read WebGL buffer.

#11

Thanks.

#12

Attached working test app which saves a .png file from documentDir to local file system.

It uses IDBFS API to read file from browser’s sandbox: https://kripken.github.io/emscripten-site/docs/api_reference/Filesystem-API.html#filesystem-api-idbfs

#13

Thanks.

Will check it.

#14

Thanks.

It works well :slight_smile: (y)

#15

the following test works for me:

local myObject1 = display.newRect( 150, 150, 100, 150 )  – Create a rectangle object

local myObject2 = display.newCircle( 100, 300, 50 )    – Create a circle object

local myObject3 = display.newImage(‘wall.png’)    – Create an image

local group = display.newGroup()

  

group:insert( myObject1 )

group:insert( myObject2 )

group:insert( myObject3 )

display.save( group, { filename=“entireGroup.png”, baseDir=system.DocumentsDirectory, captureOffscreenArea=true, backgroundColor={0,0,0,0} } )

local im=display.newImage(“entireGroup.png”, system.DocumentsDirectory, 211, 211)

im:scale(0.5,0.5)

#16

@simeonaronk can you provide a simple test app which demonstrates the issue ?

#17

Hi, Thanks for the code.

I tried that too. Do you know the Documents Folder location of browser?

I want to save the image to Desktop or Documents or Download folder.

#18

My app is for kids.

In that they have a option to save the screen to their gallery.

it works well on device, But in HTML5 it doesn’t

#19

For security reasons html5 app saves files in file sandbox. 

>>Do you know the Documents Folder location of browser?

It isn’t easy to inspect and depends on browser and OS

https://stackoverflow.com/questions/21213397/where-is-the-file-sandbox-for-a-chrome-app

>>I want to save the image to Desktop or Documents or Download folder.

I believe this way will work on all browsers

  1. upload a saved image to a server

  2. download it from server to Desktop or Documents or Download or any other folder.

#20

Thanks for the tip.

But I tried to save Canvas element as Image(Screenshot).

It works, The problem is I got Plain black image.