当前位置：首页 > JavaScript

js怎么实现图片内打字

2026-04-04 21:29:56JavaScript

在图片上实现文字叠加的方法

使用Canvas API绘制文字到图片上
通过<canvas>元素和JavaScript的Canvas API可以轻松在图片上添加文字。加载图片后，使用drawImage将图片绘制到画布上，再通过fillText方法在指定位置添加文字。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  ctx.font = '30px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('Hello World', 50, 50);
  document.body.appendChild(canvas);
};
img.src = 'image.jpg';

使用CSS绝对定位叠加文字

通过HTML结构将文字元素绝对定位在图片容器上方。创建包含图片和文字元素的容器，设置文字元素的position: absolute并调整top/left值控制位置。

<div class="image-container">
  <img src="image.jpg" alt="Background">
  <div class="overlay-text">Sample Text</div>
</div>

<style>
.image-container { position: relative; }
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
}
</style>

动态文字输入与实时更新

结合表单输入实现动态文字叠加。监听输入框的input事件，在回调函数中清除画布并重新绘制图片和最新文字内容。

js怎么实现图片内打字

const input = document.getElementById('text-input');
input.addEventListener('input', function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
  ctx.fillText(this.value, 50, 50);
});

文字样式自定义选项

通过扩展参数实现文字样式自定义。可以添加字体大小、颜色、对齐等配置选项，使用textAlign和textBaseline控制对齐方式。

function drawText(options) {
  ctx.font = `${options.size}px ${options.font}`;
  ctx.fillStyle = options.color;
  ctx.textAlign = options.align;
  ctx.fillText(options.text, options.x, options.y);
}

实现文字描边效果

使用strokeText方法为文字添加描边。先调用strokeText绘制文字轮廓，再调用fillText填充文字内部，创建双层效果。

js怎么实现图片内打字

ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.strokeText('Hello', 100, 100);
ctx.fillStyle = 'white';
ctx.fillText('Hello', 100, 100);

响应式图片文字适配

监听窗口大小变化调整画布尺寸。在resize事件中重新计算画布尺寸，保持文字位置比例不变。

window.addEventListener('resize', function() {
  const ratio = img.width / img.height;
  canvas.width = newWidth;
  canvas.height = newWidth / ratio;
  redrawImageAndText();
});

图片下载功能实现

添加将画布内容导出为图片的功能。使用toDataURL方法生成Base64数据，创建下载链接。

function downloadImage() {
  const link = document.createElement('a');
  link.download = 'image-with-text.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
}