Member Avatar for Exelio

hi guys,

I need to create an image with a plain background and a color.and in that ,i need to bind a text and an logo.

The text and the logo(a jpg file) are dynamic.

How can i do this in javascript?

Hope I am clear with the question.....

Plz help urgently.

Thanks in advance.

Regards

Exelio

  • 2 Contributors
  • 3 Replies
  • 107 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

Short answer for : yes — you can do this in browser JavaScript using the HTML5 Canvas 2D API. Canvas provides drawImage to place a logo and fillText/strokeText to draw text, and you can export the final bitmap with toDataURL or toBlob. This is client-side (not Java), so it runs in the user’s browser; server-side generation (like what mentioned for ASP.NET) is still useful when you must produce files on the server.

Example workflow (create canvas, draw background, logo, text, export):

const canvas = document.createElement('canvas');
canvas.width = 800; canvas.height = 200;
const ctx = canvas.getContext('2d');

ctx.fillStyle = '#ffffff';
ctx.fillRect(0,0,canvas.width,canvas.height);

const logo = new Image();
logo.crossOrigin = 'anonymous'; // set before .src if logo is remote
logo.onload = () => {
  ctx.drawImage(logo, 20, 40, 80, 80);
  ctx.fillStyle = '#222';
  ctx.font = '36px Arial';
  ctx.fillText('Dynamic text', 120, 100);

  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById('resultImg').src = url;
  }, 'image/png');
};
logo.src = 'https://example.com/logo.png';

Quick troubleshooting and tips:

  • Always wait for image.onload (and document.fonts.ready if using webfonts) before drawing.
  • If loading a logo from another domain, use image.crossOrigin = 'anonymous' and ensure the host sends Access-Control-Allow-Origin; otherwise the canvas is tainted and toDataURL/toBlob will throw. See MDN on CORS-enabled images and canvas export (CORS-enabled image, toDataURL/toBlob).
  • For production needs (precise font embedding, large batches, or server-only images) use server-side tools (ImageMagick/Sharp/Skia/ImageSharp). Note Microsoft documents caveats for using System.Drawing on servers running non-Windows platforms.

Recommended Answers

All 3 Replies

Member Avatar for tgreer

In JavaScript? You can't. If you want to create a dynamic image in ASP.NET, look into the [search]System.Drawing[/search] and [search]System.Drawing.Imaging[/search] namespaces.

Member Avatar for Exelio

hi,
Really thx for help.

I tried using ASP.NET and it worked fine. But i have a doubt.Is there no option in javascript by which i can do the same.

Like draw an empty image and set the text and another image dynamically.I saw there are methods drawstring and drawImage available in javascript.

Any more help on this regard

Thanks once again.

Regards

Exelio

Member Avatar for tgreer

I believe you are confusing JavaScript with Java.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.