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

推荐订阅源

J
Java Code Geeks
aimingoo的专栏
aimingoo的专栏
Martin Fowler
Martin Fowler
C
Check Point Blog
G
Google Developers Blog
V
Visual Studio Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Google DeepMind News
Google DeepMind News
人人都是产品经理
人人都是产品经理
有赞技术团队
有赞技术团队
MongoDB | Blog
MongoDB | Blog
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
大猫的无限游戏
大猫的无限游戏
D
Docker
Hugging Face - Blog
Hugging Face - Blog
The GitHub Blog
The GitHub Blog
博客园 - 三生石上(FineUI控件)
A
About on SuperTechFans
Recent Announcements
Recent Announcements
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
阮一峰的网络日志
阮一峰的网络日志
Stack Overflow Blog
Stack Overflow Blog
Vercel News
Vercel News

博客园 - 莫小龙

wps之使用宏修改全篇表格样式 geoserver之强制配置OnlineResource mysql之将shp转化为wkt,然后存储再geomerty字段内 cesium之用着色器添加建筑贴图 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)
 });

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