Javascript; Adding text on image using canvas and save to image

Question

i just want to make a page where u can type a text and add it on selected image and save that as new image.

I tried to do it in few ways, but without luck.

<body> <canvas id = "idCanvas" width = "576" height = "577"> </canvas> <img id="canvasImg" width = "576" height = "577"></img> <script> window.onload = function(){ var canvas = document.getElementById('idCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); var dataURL = canvas.toDataURL(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0, 576, 577); context.font = "20px Calibri"; context.fillText("My TEXT!", 50, 200); document.getElementById('canvasImg').src = toDataURL(); window.alert(dataURL); }; imageObj.src = "image.png"; }; </script>

When i use toDataURL() in img src, the image won't be displayed, it only works if i'm not using drawImage in canvas.

my bad, i meant document.getElementById('canvasImg').src = dataURL, — Deividas Pekunas
– Deividas Pekunas, Commented Jan 20, 2015 at 7:51

Michelangelo · Accepted Answer · 2019-12-08 20:32:50Z

Ok so yes it will not work for security reason, but there is a solution. See here a working demo: FIDDLE

draw(); function draw() { var canvas = document.getElementById('idCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0); context.font = "40px Calibri"; context.fillStyle = "red"; context.fillText("My TEXT!", 50, 300); var canvas = document.getElementById('idCanvas'); var dataURL = canvas.toDataURL(); alert(dataURL); } imageObj.setAttribute('crossOrigin', 'anonymous'); imageObj.src = "https://loremflickr.com/400/200"; };

The image url needs to be changed when you look at the fiddle. There is a cross-site problem.
@BradenBrown Thnx. Fixed it with different link. Still a warning from jsfiddle itself but the image loads.

Community · Accepted Answer · 2017-05-23 12:13:57Z

First of all, Should it be canvas.toDataURL() ?

Here is a similar example with getting contents into image element http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Also I was getting the following error when image is loaded from another hostname:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

When image is not added to canvas it works fine, so issue could be related to CORS HTTP headers not added with image. Try removing

context.drawImage(imageObj, 0, 0, 576, 577);

to see that it works without image

Here is a demo based on code in question. http://jsbin.com/logikuwefo/1/edit

Collectives™ on Stack Overflow

Javascript; Adding text on image using canvas and save to image

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related