一个笨蛋前端

好好学习,天天向上

canvas图片合成文字记录

接到一个需求,要前端动态的合成文字到图片上,基于背景整理了一下canvas 文字+图片的合成的问题.

但是在具体的实现中 还是或多或少的有很多细节 网上的文章都没有写出来 今天稍微整理一下 循序渐进的做个备忘

把一张图片绘制在一个画布上

合成图片这件事不需要在页面去写一个canvas标签,我们最终只需要展示这张合成后的图片就好,所以我们应该动态的创建一个canvas标签

const canvas = document.createElement('canvas');

读取一张图片使用drawImage绘制在canvas上

const bg = document.getElementById('source');
const context = canvas.getContext('2d');
context.drawImage(bg, 0, 0);
《canvas图片合成文字记录》

画不下?

没设置宽高的canvas是画不下未知大小的图 所以需要预设canvas的大小 这个尺寸自然图片本身

  canvas.width = bg.width;
  canvas.height = bg.height;
  context.drawImage(bg, 0, 0);
《canvas图片合成文字记录》

在画布上面写字?

fillText 可以在画布坐标上写文字

 context.fillText('我是一只小黑猫',100,100);
《canvas图片合成文字记录》

字有点小啊?

context.font可以设置filltext的字体大小粗细

//一定要设置字体的哦
context.font = 'bold 50px sans-serif'
《canvas图片合成文字记录》

换个颜色?

context.fillStyle可以设置filltext的字体颜色

  context.fillStyle = 'red'
《canvas图片合成文字记录》

字的位置怎么跑出去了?

    const canvas = document.getElementById('canvas');
  const bg = document.getElementById('src');
  const context = canvas.getContext('2d');
  canvas.width = bg.width;
  canvas.height = bg.height;
  context.drawImage(bg, 0, 0)
  context.font = 'bold 50px sans-serif'
  context.fillStyle = 'red'
  context.fillText('我是一只小红猫',0,0);
《canvas图片合成文字记录》

明明写的坐标是(0,0)怎么看不到了????

原来是Baseline的问题啊

context.textBaseline改变画布文字写入的基线,

  context.font = 'bold 50px sans-serif'
  context.fillStyle = 'red'
  context.textBaseline = 'top';
  context.fillText('我是一只小红猫',0,0);
《canvas图片合成文字记录》

此时来了一只很长很长很长的猫咪

尴尬了 我们不能换行

《canvas图片合成文字记录》

通过context.measureText我们可以判断文本长度,在和图片的宽度作比较这样就可以动态的进行换行写入了

    let posY=50
  let lineHeight=30;
  let writeY = posY
  const words = '我是一只很长很长很长长很长很长长很长很长长很长很长很长长很长很长长很长很长很长长很长很长长很长很长很长长很长很长长很长很长的小猫'.split('');
  let tempLine='';
  words.forEach(word => {
    if (writeY >  canvas.height + posY) return;
    const lineWidth = context.measureText(tempLine).width;
    //补满一行文本的指定宽度
    if (lineWidth < canvas.width) {
      tempLine = tempLine + word;
    } else {
      context.fillText(tempLine, 0, writeY);
      //换行
      writeY += lineHeight;
      tempLine = word;
    }
  });
  //写最后一行
  if (writeY < canvas.height) {
    context.fillText(tempLine, 0, writeY);
  }
《canvas图片合成文字记录》
点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Captcha Code