以下代码主要实现修改png/jpg图片的底色，就目前使用到的而言作用不大，主要用于学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modify Image Color</title>
</head>
<body>
<img id="originalImage" src="./test.png">
<canvas id="canvas" style="display: none;"></canvas><script>
var img = document.getElementById('originalImage');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);// 获取图像的像素数据
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;// 修改像素数据中的颜色，这里简单地对每个像素进行颜色调整
for (var i = 0; i < data.length; i += 4) {
// 将每个像素的红色通道设置为0，绿色通道设置为当前值，蓝色通道设置为0，保留透明通道值不变
data[i] = 255; // Red
data[i + 1] = 0; // Green
data[i + 2] = 0; // Blue}
// 将修改后的像素数据重新绘制到canvas上
ctx.putImageData(imageData, 0, 0);
// 将canvas转换为DataURL以便在<img>标签中显示修改后的图像
var modifiedImageURL = canvas.toDataURL();// 将修改后的图像显示在页面上
var modifiedImgElement = document.createElement('img');
modifiedImgElement.src = modifiedImageURL;
document.body.appendChild(modifiedImgElement);
};
</script>
</body>
</html>