fabSaveAsPNG issues

#1 · August 27, 2019, 3:11 pm

I tried using the fabrics demo. There seems to be inconsistent issue with the fabSaveAsPNG function. On my iPad and iPhone, it opens a new window on browser and image is downloaded. But on Android phone and MAC Safari, the new tab is blank. Have anyone experienced similar symptom?

i also noticed there is a subroutine prueba2 which contains

window.open(window(“Canvas”+containerId].toDataURL(‘png’));

Is the subroutine needed?

what could have caused the inconsistency in the PNG saving?

#2 · August 27, 2019, 6:01 pm

I think the subroutine was my unsuccessful attempt to force the file download instead of opening the image in a new tab.
If you use this code, you will save the canvas content as a base64 encoded PNG into the variable [myvar]:

BeginJS
containername="Container1";
$App["myvar"]=window["Canvas"+containername].toDataURL('png');
EndJS

But I have not found a solution to save it as a valid .png file (just as a base64 encoded representation).
So I opened a tab to show the encoded data as an image the user can download with a right click.
I don't know why it's inconsistent.

#3 · August 28, 2019, 1:19 am

Hi luishp

OK, will try out later. As Long as image is shown on new tab, it’s better than nothing. BTW, do I use the suggested script direct or simply execute fabSaveAsPNG command. I didn’t see the subroutine being called anywhere...

Thanks

#4 · August 28, 2019, 9:07 am

BTW, do I use the suggested script direct or simply execute fabSaveAsPNG command. I didn’t see the subroutine being called anywhere...

Just use fabSaveAsPNG to show the png into a new tab.
Use the suggested script to save a base64 encoded representation of the png image (you can later save and load it as a file, but it's not a valid png file) The subroutine is never called because it was a test I forgot to delete.
Regards.

#5 · August 28, 2019, 10:24 am

Hi luishp

Using the fabSaveAsPNG does not work for all... as mentioned earlier. could below link provides some ideas? I tested them and it accepts local image upload and save to local too - https://stackoverflow.com/questions/33806624/save-fabricjs-canvas-as-image-on-the-pc

#6 · August 28, 2019, 6:30 pm

Hi @ronnie, after doing some tests this works for me (except in Internet Explorer):

BeginJS
containername="Container1";
var mycanvas = document.getElementById(containername+"Canvas");
mycanvas.toBlob(function(blob) {
    saveAs(blob, "myimage.png");
});
EndJS

Please confirm.
Thanks!

#7 · August 29, 2019, 1:30 am

Hi luishp,

It works... Here's my quick test and feedback. Need some fine-tuning perhaps as I noticed below observations:

On Safari (Mac), the images is OK except canvas background was not in white as I've set (like it's transparent or default light grey background). Image quality is OK.
On Chrome (Mac), similar to above point (1).
On Chrome (Windows), canvas background was white as it should be.
On iPad, it's OK... image loaded (very fast) in new tab as blob:http://...
On iPhone, same experience as iPad (item 4)
On Android phone, it downloaded the file. But canvas background is transparent.

Ronnie

#8 · August 29, 2019, 8:41 am

Hi @ronnie,
Are you using fabSetBgColor command to set the background color?

#9 · August 29, 2019, 1:30 pm

Yes. I thought changing it to #ffffff would work.

Anyway, I insert a workaround to force bgcolour to white before saving to png, and it works fine...

fabUnselect "Container1"
fabSetBgColor "Container1" "#ffffff"

#10 · September 26, 2019, 6:56 pm

Hola,

Tenéis un ejemplo que se pueda abrir con el programa visualneo donde se pueda visualizar el código. No consigo que funcione la captura en imagen png.

Gracias

#11 · September 26, 2019, 7:26 pm

@rrey aquí tienes un ejemplo.
Recuerda que no funcionará en Internet Explorer.
Saludos.

Uploaded files:

You need to login to have access to uploads.

#12 · September 26, 2019, 9:08 pm

Muchas gracias.

Si quiero añadir una imagen al container he probado con:

setVar [imagen] "Image1.jpg"
fabInitialize "Container1"
fabNewCircle "Container1" "c1" 160 90 100 "red"

fabLoadLocal "Container1" [imagen]

No me funciona algo algo mal.

#13 · September 27, 2019, 10:07 am

@rrey, me temo que fabLoadLocal no sirve para eso, sino para cargar una imagen previamente guardada con fabSaveLocal.
Por favor echa un vistazo a estos hilos:
https://visualneo.com/forum/topic/load-image-from-local-system-to-fabricjs-canvas
https://visualneo.com/forum/topic/load-image-and-auto-scale

fabSaveAsPNG issues - Forum

fabSaveAsPNG issues