改变canvas生成的图片中文本颜色

最新推荐文章于 2024-07-07 22:18:15 发布

司徒小北

最新推荐文章于 2024-07-07 22:18:15 发布

阅读量3.2k

点赞数

分类专栏： canvas 文章标签： canvas canvas 图片文本颜色 canvas source globalComposite source-in

本文链接：https://blog.csdn.net/weixin_42333548/article/details/115870341

版权

canvas 专栏收录该内容

2 篇文章

订阅专栏

一、将canvas画布生成图片

获取canvas，通过canvas.toDataURL('image/png', 1)直接可以将画布转换成base64图片

二、canvas书写的时候是一个颜色，书写完生成图片的时候，图片中的文本字体变成另一个颜色，如何处理？

可以通过设置canvas.getContext('2d').globalCompositeOperation的值来实现

具体方法如下：

书写中画布的文本颜色设置：

this.canvas = canvas;
this.context = canvas.getContext('2d');
context.strokeStyle = '#F2D49F';

生成图片之前通过canvas.getContext('2d').globalCompositeOperation = "source-in" 来改变颜色(https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)

async getPNGImage(canvas = this.canvas) {
    const w = canvas.width;
    const h = canvas.height;
    let ctx = canvas.getContext('2d');

    // 设置canvas生成的图片中文本的颜色
    ctx.globalCompositeOperation = 'source-in';
    ctx.fillStyle = "#0710B2";
    ctx.fillRect(0, 0, w, h);

    // 签名生成图片后颜色恢复到原始颜色，画布中颜色不变
    setTimeout(() => {
      ctx.globalCompositeOperation = 'source-in';
      ctx.fillStyle = "#F2D49F";
      ctx.fillRect(0, 0, w, h);
    })

    return canvas.toDataURL('image/png', 1)
}

通过以上的操作可以实现的是：

比如有一个canvas画布，书写的时候，字体颜色设置成白色，这时候canvas画布上都是白色的字体，然后需要将canvas画布书写的内容生成一张透明的png图片，这张图片因为要放到其他地方去展示，所以可能需要改一下图片上的文字颜色。所以就用到了我们的globalCompositeOperation，需要手动设置。在生成图片之前设置一下，生成的图片就会是我们上面预期的效果

交流
1、QQ群：可添加qq群共同进阶学习：进军全栈工程师疑难解群号: 856402057

2、公众号：公众号「进军全栈攻城狮」，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！