Writing in Image with Javascript

Asked

Viewed 1,065 times

3

I looked it up, but I can’t find any content!

As in PHP there is a Imagestring, to write over the images, there is some library in JS that has the same function ?

Setting:

I have an image that will serve as a template for the user, I want him to type in the form that will exist, name, extension and position, and should appear in the image, and that he can save it later.

Does anyone know any solution?!

javascript image

1 answer

1

Here’s an example where I write with Canvas in a picture:

$(document).ready(function(){
  var canvas = $("#myCanvas")[0];
  var context = canvas.getContext("2d");
  var imageObj = new Image();
  imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "20px Calibri";
     context.fillStyle = 'white';
     imageObj.setAttribute('crossOrigin', 'anonymous');
     context.fillText("https://obscure.network", 70, 50);

     // open the image in a new browser tab
     // the user can right-click and save that image
     $(document.body).append("<img src='"+canvas.toDataURL()+"'/>");  

 };
 imageObj.src = "https://i.imgur.com/8Yf5rt1.jpg"; 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="500" height="400"></canvas>

Browser other questions tagged javascript image

You are not signed in. Login or sign up in order to post.