Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to create a new image from some text and another image, in js?

<body id="slshow_body" style="text-align: center;" >
<h2>Add new sliding image</h2>
<img name="simage1" id="simage1" src=""/>
<br>
<br>
<a href="http://localhost:3000" type="button" class="homepg-btn">Çıkış/Ana sayfa</a>
<script>
    window.addEventListener('load', () => { 
        simage1.src = "http://127.0.0.1:3000/Brother TN-1040 toner.png";
        simage1.appendChild("Brother TN-1040 toner");
        simage1.appendChild("Price: $100");
    })    
</script>

Hello js gurus. I’d like to put some text and a picture together to create a new picture in js. I tried using appendChild method as shown in my attached code but I can’t get it to work. When I run the code, all I get is simage1 picture without the text that I want to append. Any help will be appreciated. Thanks.

Tags:

2

Answers


  1. 0

    Try to use jimp npm library. Look at the Jimp.loadFont method.

    Login or Signup to reply.
  2. 0

    You are entering a new world of wonders: canvas.

    const canvas = document.getElementById("scene");
const sample = document.getElementById("sample");

const ctx = canvas.getContext("2d");

const image = new Image();
image.crossOrigin="anonymous"
image.src = "http://placekitten.com/g/300/150";

image.addEventListener("load", (e) => {
  ctx.drawImage(image, 0, 0, 300, 150, 0, 0, 300, 150);

  ctx.font = "50px serif";
  ctx.fillStyle = "#ff0000";
  ctx.fillText("Hello world", 30, 90);

  const imgData = canvas.toDataURL('image/png');
  sample.src = imgData;
});
    <h1>Canvas</h1>
<canvas id="scene"></canvas>

<h2>Generated image</h2>
<img id="sample" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search