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.
npm install text-behind-image
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
).
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 */ },
});
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>
);
};
<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>
<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}
TextBehindImage
Processes an image by applying a text-behind-image effect.
image
(string | File | Blob): The image to process (URL, File, or Blob).textSettings
(object | object[]): Settings for one or more text layers. Each object supports:font
(string): Font familyfontSize
(number): Font sizecolor
(string): Text colorcontent
(string): Text contentposition
(object): { x: number, y: number }
alignment
(CanvasTextAlign): Text alignmentrotation
(number): Rotation in degreesshadowColor
, shadowBlur
, shadowOffsetX
, shadowOffsetY
strokeColor
, strokeWidth
opacity
(number): 0-1letterSpacing
(number)lineHeight
(number)format
(string): Output format ('png', 'jpg', 'webp')outputType
(string): 'dataUrl' (default), 'blob', or 'file'bgRemovalOptions
(object): Options for background removal (see @imgly/background-removal)Promise<string | Blob | File>
: The final image as a Data URL, Blob, or File.canvas
package. See system dependencies below.canvas
package.canvas
: Used for rendering images and text.@imgly/background-removal
: For background removal functionality.sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
brew install pkg-config cairo pango libpng jpeg giflib librsvg
If you want to contribute to this project, feel free to open an issue or fork this repository & open a pull request. Please:
We appreciate all contributions that help make this package better!
Again, a big thanks to Rexan Wong for his incredible original work on the text-behind-image website, which inspired this package.