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

推荐订阅源

L
LangChain Blog
V
V2EX
爱范儿
爱范儿
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Martin Fowler
Martin Fowler
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Apple Machine Learning Research
Apple Machine Learning Research
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
宝玉的分享
宝玉的分享
Last Week in AI
Last Week in AI
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
罗磊的独立博客
小众软件
小众软件
Vercel News
Vercel News
博客园 - 司徒正美
阮一峰的网络日志
阮一峰的网络日志
V
Visual Studio Blog
J
Java Code Geeks
P
Proofpoint News Feed
MongoDB | Blog
MongoDB | Blog
B
Blog
美团技术团队
量子位

博客园 - 莫小龙

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)
 });

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