Write in Image with JavaScript

1

I researched, but I can not find any content!

As in PHP there is ImageString to write on the images, is there any library in JS that has the same function?

Scenario:

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

Does anyone know of a solution?!

    
asked by anonymous 05.12.2017 / 14:34

1 answer

0

Here is an example where I write with Canvas in an image:

$(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><canvasid="myCanvas" width="500" height="400"></canvas>
    
05.12.2017 / 15:03