Generated Image from html5 canvas could not be saved in chrome

Question

I have an html canvas where things are drawn by the users( used FabricJs ).

In short the issues are(only in Chrome):
a) Right click > Save not working for the snapshot image from the canvas.
b) Sometimes the snapshot image is blank when trying to print.

I have created a testing version at: Codepen
Please check in Chrome.

There are 2 button beside the canvas - Download & Print.
Both having different issues - only in Chrome.

When the Download button is clicked an window is opened containing a snapshot image of the canvas using - canvas.toDataURL(). User then can right click on the image and save it. This works Ok in Firefox(user can right-click -> save the image). In chrome the dialog window opens with the image perfectly, but if right click on the image, then after selecting 'Save the Image' - nothing happens. The image is Ok, you can drag-drop-save it from the dialog window to desktop directly. But saving from the right-click-menu option does not work.

On 'Download' button click I am calling a function like the following to popup a window with the snapshot in it.

function open_dialog() {
  var canvas_image_data = canvas.toDataURL();

  var dlWindow = window.open("", "Download Image", "directories=0,titlebar=0,toolbar=0,location=0,status=0,menubar=0,scrollbars=no,resizable=no,width=500, height=500");

  dlWindow.document.write('<img src="'+canvas_image_data+'" style="border: 1px solid #FF0000;" width="300" height="300"/>');

  return dlWindow;
}

When the Print Button is clicked the Dialog with image snapshot is opened and browser's print features is called. This also works Ok in FireFox, but in chrome - the image is blank in the print preview sometimes. In my testing(in several devices, the ratio is like - missing once in every 3/4 times in the Print button click).

Thanks in advance for any suggestions/clue for the issues!

I am taking a snapshot of the canvas using canvas.toDataURL() method. — Tanvir Ahmed, Jul 14 '18 at 17:35
for example: , here an image is shown(snapshot of the canvas), but it cannot be right-click and saved to disk from chrome browser. — Tanvir Ahmed, Jul 14 '18 at 19:24

score 2 · Accepted Answer · answered Jul 15 '18 at 08:20

2

I came from another question with exactly the same problem (image async load).

Altough you create an image with a data URL, the image still fires its load event. I mean, you are calling print before the image is loaded (the browser loads images in an asynchronous way, even with data URLs). You must wait for the image throw the load event and then call the print method.

Here you have a dirty patch, so you get the idea: https://codepen.io/anon/pen/oMbYEX

answered Jul 15 '18 at 08:20

Jorge Fuentes González

10,682
4
38
58

thanks @Jorge Fuentes González for the solution. It resolved the print preview missing issue. – Tanvir Ahmed Jul 16 '18 at 12:48
I am still searching to resolve the primary issue(a) - not being able to right-click, then save the image. I have no clue yet - why chrome is not letting a loaded image(preview ok, can be drag-drop & saved) to be saved :( – Tanvir Ahmed Jul 16 '18 at 12:50
@TanvirAhmed You can use this to allow the user download the image: https://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64 – Jorge Fuentes González Jul 17 '18 at 09:04
Thank you very much @Jorge Fuentes González, I really appreciate your help. I finally resolved the remaining download issue from the provided examples of yours. I loaded the download window as follow - and it worked Ok both in Chrome & Firefox :) – Tanvir Ahmed Jul 17 '18 at 11:27
@TanvirAhmed yay! ^^ – Jorge Fuentes González Jul 17 '18 at 19:01

Generated Image from html5 canvas could not be saved in chrome

1 Answers1