Text-behind-image package

Text-behind-image package

A framework-agnostic package to display the text-behind-image effect in any web application or Node.js script. Inspired by the work of Rexan Wong and developed to be easily integrated directly into your projects.

Installation

npm install text-behind-image

Usage

This package provides a single core function, TextBehindImage, which takes an image (URL, File, or Blob), advanced text settings (single or multiple layers), and a result image format/output type to apply the text-behind-image effect.

Framework-agnostic: Works in any environment that supports the HTML Canvas API (browsers, Electron, Node.js with canvas).

Basic Example

import { TextBehindImage } from "text-behind-image";

const result = await TextBehindImage({
  image: fileOrUrl, // string | File | Blob
  textSettings: [
    {
      font: "Arial",
      fontSize: 48,
      color: "white",
      content: "Sample Text",
      position: { x: 100, y: 100 },
      alignment: "center",
      rotation: 0,
      shadowColor: "#000",
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowOffsetY: 0,
      strokeColor: "#fff",
      strokeWidth: 2,
      opacity: 0.9,
      letterSpacing: 2,
      lineHeight: 1.5,
    },
    // ...more layers
  ],
  format: "png",
  outputType: "dataUrl", // or 'blob' | 'file'
  bgRemovalOptions: { /* options for background removal */ },
});

Usage in Frameworks

React

import React, { useState } from "react";
import { TextBehindImage } from "text-behind-image";

const App = () => {
  const [imageUrl, setImageUrl] = useState("");
  const generateImage = async () => {
    const result = await TextBehindImage({
      image: "https://example.com/image.png",
      textSettings: {
        font: "Arial",
        fontSize: 48,
        color: "white",
        content: "Sample Text",
        position: { x: 100, y: 100 },
      },
      format: "png",
    });
    setImageUrl(result);
  };
  return (
    <div>
      <button onClick={generateImage}>Generate Image</button>
      {imageUrl && <img src={imageUrl} alt="Generated" />}
    </div>
  );
};

Vue 3

<template>
  <div>
    <button @click="processImage">Generate Image</button>
    <img v-if="imageUrl" :src="imageUrl" alt="Generated" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { TextBehindImage } from 'text-behind-image';
const imageUrl = ref('');
async function processImage() {
  const result = await TextBehindImage({
    image: 'https://example.com/image.png',
    textSettings: {
      font: 'Arial',
      fontSize: 48,
      color: 'white',
      content: 'Sample Text',
      position: { x: 100, y: 100 },
    },
    format: 'png',
  });
  imageUrl.value = result;
}
</script>

Svelte

<script>
  import { TextBehindImage } from 'text-behind-image';
  let imageUrl = '';
  async function generateImage() {
    const result = await TextBehindImage({
      image: 'https://example.com/image.png',
      textSettings: {
        font: 'Arial',
        fontSize: 48,
        color: 'white',
        content: 'Sample Text',
        position: { x: 100, y: 100 },
      },
      format: 'png',
    });
    imageUrl = result;
  }
</script>
<button on:click={generateImage}>Generate Image</button>
{#if imageUrl}
  <img src={imageUrl} alt="Generated" />
{/if}

API Reference