背景
开发echarts时，通过base64字符串设置markPoint自定义图标，但是如果颜色有所变更，就很麻烦了，就研究下了下如何给base64字符串转颜色
markPoint: {
symbol:
'image://' +
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAjCAMAAAD1/jdcAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA661F661F661F661F661F661F661F661F661F661F661F661F661F7bNR8Lxi8b5m8b9n661F661F661F8b5l661F661F661F661F8b5m8b9m7bNR661F7LFM661F661F661F7bRS8b5m8L1k7LBK661F661F661F661F661F661F7rVT8L1k7LBL661F661F661F661F7rZV8L1k7LFN661F661F661F661F661FvQ/oBwAAADt0Uk5TAAIHDBIVFgQcLTk/QSNbzvb/Bg0s7jgRPhT391obTSJDS3/45mVJQgMXHTFz5FUrARAoZNJHDhkeCwVXmKGrAAAA40lEQVR4nO3WxxKCMBAG4IWlg8QgRQTE3nvX938wE73KOJN48MB/znzZ0/4LAIqKmm6IRddQVYDFRMt2XE8srmNbaLJJsOGTJhVNk/gNVEC1fHHj5fhWAC2bSCGUkhBBc+RGoTSKE9BdSYTSdgqGJ614Rq3USq3Uyp8rP9iYbsq2d0cS4dv7N03CWi2TQrK8CHjD5iQSNiLSLVnD8rYP449t3+sPhuzhaDyZVrZ9HBY440eDElRcHvPFcpXR9WZbVF8eCQavy6M6O3N/OJ7O5fsz4ezMy/Vm3OUQxswe6uPLxDxPYLiMPmJuVccAAAAASUVORK5CYII',
symbolSize: [65, 31],
symbolOffset: [0, -22],
label: {
color: '#fff',
},
data: item.val.map((subitem, index) => {
return { coord: [index, subitem], value: subitem };
}),
},
可运行的完整html
思路：通过base64设置canvas上，更改canvas三原色，再canvas转base64
<!DOCTYPE html>
<html>
<head>
<title>修改 Base64 图片颜色</title>
</head>
<body>
<h1>修改 Base64 图片颜色</h1>
<label for="base64Input">输入 Base64 字符串：</label>
<textarea id="base64Input" rows="25" cols="220"></textarea><br />
<label for="colorInput"
>输入颜色（例如：#FF0000 或 rgb(255, 0, 0)）：</label
>
<input type="text" id="colorInput" /><br />
<button onclick="modifyImageColor()">修改颜色</button>
<h2>修改后的图片：</h2>
<img id="modifiedImage" src="" alt="Modified Image" />
<button onclick="copyToClipboard()">复制修改后的 Base64</button>
<script>
function modifyImageColor() {
const base64Image = document.getElementById("base64Input").value;
const colorInput = document.getElementById("colorInput").value;
const img = new Image();
img.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
let red = 0;
let green = 0;
let blue = 0;
// 解析颜色输入
if (/^#[0-9A-Fa-f]{6}$/.test(colorInput)) {
red = parseInt(colorInput.substring(1, 3), 16);
green = parseInt(colorInput.substring(3, 5), 16);
blue = parseInt(colorInput.substring(5, 7), 16);
} else if (
/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.test(colorInput)
) {
const match = colorInput.match(
/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/
);
red = parseInt(match[1]);
green = parseInt(match[2]);
blue = parseInt(match[3]);
}
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = red; // 红色通道
pixels[i + 1] = green; // 绿色通道
pixels[i + 2] = blue; // 蓝色通道
}
ctx.putImageData(imageData, 0, 0);
const newBase64Image = canvas.toDataURL("image/png");
// 显示修改后的图片
const modifiedImage = document.getElementById("modifiedImage");
modifiedImage.src = newBase64Image;
// 将修改后的 base64 图像保存到全局变量
window.modifiedBase64Image = newBase64Image;
};
img.src = base64Image;
}
function copyToClipboard() {
if (window.modifiedBase64Image) {
const dummyTextArea = document.createElement("textarea");
dummyTextArea.value = window.modifiedBase64Image;
document.body.appendChild(dummyTextArea);
dummyTextArea.select();
document.execCommand("copy");
document.body.removeChild(dummyTextArea);
alert("修改后的 Base64 图像已复制到剪贴板！");
} else {
alert("请先点击 '修改颜色' 以生成修改后的 Base64 图像。");
}
}
</script>
</body>
</html>
封装base64字符串转颜色函数
modifyImageColor(base64Image, colorInput) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = base64Image;
img.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
let red = 0;
let green = 0;
let blue = 0;
// 解析颜色输入
if (/^#[0-9A-Fa-f]{6}$/.test(colorInput)) {
red = parseInt(colorInput.substring(1, 3), 16);
green = parseInt(colorInput.substring(3, 5), 16);
blue = parseInt(colorInput.substring(5, 7), 16);
} else if (
/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/.test(colorInput)
) {
const match = colorInput.match(
/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/
);
red = parseInt(match[1]);
green = parseInt(match[2]);
blue = parseInt(match[3]);
}
for (let i = 0; i < pixels.length; i += 4) {
pixels[i] = red; // 红色通道
pixels[i + 1] = green; // 绿色通道
pixels[i + 2] = blue; // 蓝色通道
}
ctx.putImageData(imageData, 0, 0);
const newBase64Image = canvas.toDataURL('image/png');
resolve(newBase64Image);
};
img.onerror = function (error) {
reject(error);
};
});
},
...
markPoint: {
symbol:
'image://' +
(await this.modifyImageColor(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAAAjCAMAAAD1/jdcAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALFQTFRFAAAA661F661F661F661F661F661F661F661F661F661F661F661F661F7bNR8Lxi8b5m8b9n661F661F661F8b5l661F661F661F661F8b5m8b9m7bNR661F7LFM661F661F661F7bRS8b5m8L1k7LBK661F661F661F661F661F661F7rVT8L1k7LBL661F661F661F661F7rZV8L1k7LFN661F661F661F661F661FvQ/oBwAAADt0Uk5TAAIHDBIVFgQcLTk/QSNbzvb/Bg0s7jgRPhT391obTSJDS3/45mVJQgMXHTFz5FUrARAoZNJHDhkeCwVXmKGrAAAA40lEQVR4nO3WxxKCMBAG4IWlg8QgRQTE3nvX938wE73KOJN48MB/znzZ0/4LAIqKmm6IRddQVYDFRMt2XE8srmNbaLJJsOGTJhVNk/gNVEC1fHHj5fhWAC2bSCGUkhBBc+RGoTSKE9BdSYTSdgqGJ614Rq3USq3Uyp8rP9iYbsq2d0cS4dv7N03CWi2TQrK8CHjD5iQSNiLSLVnD8rYP449t3+sPhuzhaDyZVrZ9HBY440eDElRcHvPFcpXR9WZbVF8eCQavy6M6O3N/OJ7O5fsz4ezMy/Vm3OUQxswe6uPLxDxPYLiMPmJuVccAAAAASUVORK5CYII',
'#4BC5F2'
)),
symbolSize: [65, 31],
symbolOffset: [0, -22],
label: {
color: '#fff',
},
data: item.val.map((subitem, index) => {
return { coord: [index, subitem], value: subitem };
}),
},
