Put text on image and save as image

Question

I have one problem with HTML5 canvas. I have one image. In this image, I want to put text and display / save it as an image.

I have this code:

window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, 10, 10); context.font = "20px Calibri"; context.fillText("My TEXT!", 50, 200); }; imageObj.src = "mail-image.jpg"; }; 

It works great. It has an image and text on it. But this is still canvas and image. Can anybody help me?

Answer 1

For security reasons, there is no convenient way to save a drawing to the user's local disk.

As a workaround, go to the "old school": convert the canvas to an image and display it in a new window.

 window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, 10, 10); context.font = "20px Calibri"; context.fillText("My TEXT!", 50, 200); // open the image in a new browser tab // the user can right-click and save that image var win=window.open(); win.document.write("<img src='"+canvas.toDataURL()+"'/>"); }; imageObj.src = "mail-image.jpg"; }; 

Answer 2

Sand box

Sandbox browsers when it comes to saving content to the user's hard drive. This is for security (you do not want a bad hacker (or spy) to overwrite system files or install a virus or backdoor, etc.). Therefore, direct access is denied and local storage is isolated.

You always need to “bridge” the content by interacting with a user who approves the operation, and therefore the browser will ask you to select a location for the file by opening a dialog box so that the user knows that the browser is trying to deliver the content for saving (see the demo below).

Access Save Dialogs

Here are a few other download options.

If the link, for example, under the image, is OK, you can do:

 /// create an anchor/link (or use an existing) var lnk = document.createElement('a'); /// set your image as data-uri link lnk.href = canvas.toDataURL(); /// and the key, when user click image will be downloaded lnk.download = 'filename.png'; /// add lnk to DOM, here after the canvas canvas.parentElement.appendChild(lnk); 

Download attribute is a new feature of HTML5. Instead of “navigating” to this location, the browser displays a save dialog and allows the user to save its contents to disk.

You can also automate the entire click function by creating an event for it.

For instance:

See ONLINE DEMO HERE :

 function download(canvas, filename) { if (typeof filename !== 'string' || filename.trim().length === 0) filename = 'Untitled'; var lnk = document.createElement('a'), e; lnk.download = filename; lnk.href = canvas.toDataURL(); if (document.createEvent) { e = document.createEvent("MouseEvents"); e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); /// send event lnk.dispatchEvent(e); } else if (lnk.fireEvent) { lnk.fireEvent("onclick"); } } 

Saving on the server

You can always proceed to save the file to the server. However, you will also have to go through the save dialog step when retrieving a file from the server (dialog).

If you want to save the file for display only in the browser, this is ideal.

There are various ways to do this (there are many solutions for SO for this).

Local storage

And another option is to save the file in the local storage of the browser. You have Web Storage , however this is very limited (usually from 2.5 to 5 mb) and given that each char stored takes two bytes, the actual storage is half that (it can only store strings such as uri-data and data- uris, about 33% more than the original file). But if you keep small icons, sprites, etc., it can do.

Alternatively, you can use Indexed DB (and now deprectaed Web SQL ), which can store more data, and you can also request user permission to store x mb of data.

The same thing happens with the File API (which is currently only used in Chrome). It looks more like a file system and is designed to store huge files.

This may seem more complicated if you are not familiar with them, but I mention them as possible options, since they also save your bandwidth, which communicates with the server, and you transfer the "load" to the client, and not to the server.