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

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

一、将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,需要手动设置。在生成图片之前设置一下,生成的图片就会是我们上面预期的效果


目录
打赏
0
0
0
0
5
分享
相关文章
axios 上传显示进度
axios 上传显示进度
171 0
几百T的视频、图片数据进行更有效地存储和管理
采用传统硬盘搭建存储方案,看起来成本低廉,但是再加上各种附加因素后却大幅攀升,而云存储厂商通常提供基于订阅的定价模型、一些免费服务和一定的折扣。现在,我们就来了解一下如何更省钱地使用云存储。
20223 43
几百T的视频、图片数据进行更有效地存储和管理
使用 CSS variables 和Tailwind css实现主题换肤
最近在网上看到 Tailwind Labs的实现的[换肤视频],决定使用 Tailwind css 实现博客列表主题换肤。
1427 0
李峋同款爱心Python代码版来了
李峋同款爱心Python代码版来了
8949 2
李峋同款爱心Python代码版来了
领取永久免费的ClawCloud云服务容器部署Alist网盘
领取永久免费的ClawCloud云服务容器部署Alist网盘,这是一款类似于 Vercel 和 Netlify 的在线开发平台,专为开发者和个人用户设计。如 Alist、Dify、frp 等,无需复杂的配置或高昂的成本。目前,平台提供永久免费的 5 刀/月额度,只需绑定一个注册超过 180 天的 GitHub 账号即可享受。
1511 10
|
9月前
|
API
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
Vue3组件通信全解析:利用props、emit、provide/inject跨层级传递数据,expose与ref实现父子组件方法调用
1586 0
人工智能如何影响前端开发
【6月更文挑战第1天】人工智能如何影响前端开发
240 3
【人工智能】TensorFlow简介,应用场景,使用方法以及项目实践及案例分析,附带源代码
TensorFlow是由Google Brain团队开发的开源机器学习库,广泛用于各种复杂的数学计算,特别是涉及深度学习的计算。它提供了丰富的工具和资源,用于构建和训练机器学习模型。TensorFlow的核心是计算图(Computation Graph),这是一种用于表示计算流程的图结构,由节点(代表操作)和边(代表数据流)组成。
328 0
【机器学习】随机森林:深度解析与应用实践
在机器学习的广阔天地中,集成学习方法因其卓越的预测能力和泛化性能而备受青睐。其中,随机森林(Random Forest)作为集成学习的一个重要分支,凭借其简单、高效且易于实现的特性,在分类和回归任务中展现了非凡的表现。本文将深入探讨随机森林的基本原理、核心构建模块、关键参数调优以及在实际应用中的策略与案例分析,旨在为读者提供一个全面而深入的理解。
1030 3
python中删除含有缺失值的行
python中删除含有缺失值的行
543 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问