惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Jina AI
Jina AI
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
P
Privacy & Cybersecurity Law Blog
SecWiki News
SecWiki News
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Hacker News: Ask HN
Hacker News: Ask HN
Engineering at Meta
Engineering at Meta
Hugging Face - Blog
Hugging Face - Blog
PCI Perspectives
PCI Perspectives
www.infosecurity-magazine.com
www.infosecurity-magazine.com
T
The Exploit Database - CXSecurity.com
博客园_首页
Latest news
Latest news
T
Threat Research - Cisco Blogs
N
News and Events Feed by Topic
TaoSecurity Blog
TaoSecurity Blog
罗磊的独立博客
月光博客
月光博客
C
Cisco Blogs
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
V
V2EX
Last Week in AI
Last Week in AI
Cloudbric
Cloudbric
MyScale Blog
MyScale Blog
Spread Privacy
Spread Privacy
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
P
Proofpoint News Feed
G
GRAHAM CLULEY
N
News and Events Feed by Topic
MongoDB | Blog
MongoDB | Blog
N
Netflix TechBlog - Medium
M
MIT News - Artificial intelligence
I
InfoQ
Microsoft Security Blog
Microsoft Security Blog
人人都是产品经理
人人都是产品经理
K
Kaspersky official blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
量子位
I
Intezer
Microsoft Azure Blog
Microsoft Azure Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
A
About on SuperTechFans
D
DataBreaches.Net
宝玉的分享
宝玉的分享
S
Security @ Cisco Blogs
Help Net Security
Help Net Security
Hacker News - Newest:
Hacker News - Newest: "LLM"

博客园 - 莫小龙

uniapp之plus.downloader.createDownload下载文件传参 谷歌之将网页保存为图片 elementui之table中相同数据的单元格合并 krpano之使用教程 threejs之灯光不跟随OrbitControls控制器旋转 threejs之将张纹理图片组成材质组 threejs之将PlaneGeometry转换为BufferGeometry threejs之利用shape通过线绘制面和体 threejs之添加渐变背景 threejs之创建发光墙体 paperjs之fitBounds适应区域前后屏幕坐标和输入坐标的转换 arcmap之通过点数据获取等值线 uniapp之安卓APP打开百度地图、高德地图APP openlayer之添加带箭头的线 geoserver之图片图标样式 SHP转WKT文件工具 openlayers之geoserver的wms图层mysql数据源数据修改后更新问题 通过日照时数计算每天RAD(太阳辐射)值 Uniapp之安卓签名证书(.keystore)生成
canvas之修改Base64图片中不透明部分的颜色
莫小龙 · 2025-08-05 · via 博客园 - 莫小龙

canvas之修改Base64图片中不透明部分的颜色

方法代码:

 /**
* 修改Base64图片中不透明部分的颜色
* @param {string} base64Image - Base64格式的图片数据
* @param {string} newColor - 要替换的新颜色(十六进制格式,如'#ff0000')
* @param {number} [threshold=0] - 透明度阈值(0-255),低于此值视为透明
* @param {function} [callback] - 处理完成后的回调函数
* @returns {Promise<string>} 返回处理后的Base64图片
*/
        function changeBase64ImageColor(base64Image, newColor, threshold = 0, callback) {
            return new Promise((resolve) => {
                const img = new Image();
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;

                    // 绘制原始图像
                    ctx.drawImage(img, 0, 0);

                    // 获取像素数据
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const data = imageData.data;

                    // 将新颜色从十六进制转换为RGB
                    const hex = newColor.replace('#', '');
                    const r = parseInt(hex.substring(0, 2), 16);
                    const g = parseInt(hex.substring(2, 4), 16);
                    const b = parseInt(hex.substring(4, 6), 16);

                    // 修改不透明像素的颜色
                    for (let i = 0; i < data.length; i += 4) {
                        // 检查alpha通道(透明度)
                        if (data[i + 3] > threshold) {
                            data[i] = r;     // R
                            data[i + 1] = g; // G
                            data[i + 2] = b; // B
                            // 保持原始alpha值不变
                        }
                    }

                    // 将修改后的像素数据放回canvas
                    ctx.putImageData(imageData, 0, 0);

                    // 转换为Base64
                    const newBase64 = canvas.toDataURL('image/png');

                    if (callback) callback(newBase64);
                    resolve(newBase64);
                };

                img.src = base64Image;
            });
        }

调用方法:

changeBase64ImageColor(png1, hexColor).then(newImage => {
    console.log(newImage)
 });

钻研不易,转载请注明出处。。。。。。