How to Save text over image with jquery

Question

I am new to javascript. i have the following code of javascript and html. the problem is that when i download the image the text written by the javascript dose not show on the downloaded image. or you can say in other words the text dose not print on the image. which i want to achieve. following is the code

<script type="text/javascript">
  jQuery(function($){

    var textover_api;
  
    $('#target').TextOver({}, function() {
      textover_api = this;
  
    });

 

  });

</script>

<img src="demo.jpg" id="target" />

i want to achieve the functionality like http://addtext.com/.

thanking in advance.

I have to write at least 15 characters but.... What??? What's TextOver? Some custom jQuery Plugin? — An0nC0d3r, Oct 24 '15 at 16:54
I doubt this is possible with javascript. The site you linked to most likely uploads the picture and adds the text server side. — Ash Burlaczenko, Oct 24 '15 at 16:54
server side is with php. but the site i linked is using javascript. — Usman Ahmed Mani, Oct 24 '15 at 17:15

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You can make use of HTML5 using canvas and return the base64 data example here:

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

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 = "http://lorempixel.com/400/200/";
};`

<canvas id="idCanvas" width="576" height="577"></canvas>

http://jsfiddle.net/hmr7c8po/

edited May 23 '17 at 12:14

Community

1
1

answered Oct 24 '15 at 20:17

Stefan van de Laarschot

2,154
6
30
50

no this dose not serves my purpose. Can i get the value(in other words the text) written in the **textover_api** in a php variable? or in other words can i pass the value of **textover_api** to a php variable. – Usman Ahmed Mani Oct 25 '15 at 06:38
Sorry don't know much about PHP but i know that there are people arround here that are glad to help you out :) sad thats not what youre looking for GL with your solution. – Stefan van de Laarschot Oct 25 '15 at 06:41

How to Save text over image with jquery

1 Answers1