需求
需要传入svg并且传一个颜色，svg能根据这个颜色变化，然后svg在后面，传进来的图片在前方，类似下方图片所示 ![[Pasted image 20241024173750.png]]
代码
javascript
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas 圆形图片测试</title>
</head>
<body>
<h1>Canvas测试</h1>
<img id="resultImg" alt="结果图片" />
<script>
function drawImageInCircleWithSvgBorder(imageUrl, svgString, svgColor) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const outerCircleRadius = 40; // 外圈半径
const innerCircleRadius = 22; // 内圈半径
const canvasSize = outerCircleRadius * 2; // canvas大小等于外圈直径
canvas.width = canvasSize;
canvas.height = canvasSize;
// 动态修改 SVG 的颜色
const updatedSvgString = svgString.replace(/fill="[^"]*"/g, `fill="${svgColor}"`);
// 将更新后的 SVG 字符串转换为 Blob 对象
const svgBlob = new Blob([updatedSvgString], { type: 'image/svg+xml' });
const url = URL.createObjectURL(svgBlob);
// 创建一个新的 Image 对象来加载 SVG
const svgImage = new Image();
svgImage.src = url;
svgImage.onload = () => {
// 绘制 SVG 到 Canvas
ctx.drawImage(svgImage, 0, 0, canvasSize, canvasSize);
const img = new Image();
img.src = imageUrl;
img.crossOrigin = 'Anonymous'; // 处理跨域问题
img.onload = () => {
// 计算图片绘制的起始位置和大小，使其适应内圈
const imgX = (canvasSize - innerCircleRadius * 2) / 2 - 1;
const imgY = (canvasSize - innerCircleRadius * 2) / 2 - 10;
const imgSize = innerCircleRadius * 2;
// 绘制内层圆形，剪裁为圆形区域
ctx.save();
ctx.beginPath();
ctx.arc(canvasSize / 2 - 1, canvasSize / 2 - 10, innerCircleRadius, 0, Math.PI * 2);
ctx.clip();
// 绘制图片到 Canvas 上
ctx.drawImage(img, imgX, imgY, imgSize, imgSize);
ctx.restore();
// 转换为 base64 图片
const base64 = canvas.toDataURL('image/png');
const resultImg = document.getElementById('resultImg'); // 假设有一个 <img> 元素用来显示结果
resultImg.src = base64;
// 释放 URL 对象
URL.revokeObjectURL(url);
};
};
}
// 使用示例，替换为实际的图片 URL
drawImageInCircleWithSvgBorder(
'./test.png',
'<svg t="1729755802620" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1808" width="200" height="200"><path d="M271.426783 945.241043a236.29913 78.758957 0 1 0 472.59826 0 236.29913 78.758957 0 1 0-472.59826 0Z" fill="#999999" fill-opacity=".4" p-id="1809"></path><path d="M501.559652 905.839304c245.337043-211.233391 368.016696-386.693565 368.016696-526.402782C869.576348 169.872696 704.77913 0 501.537391 0 298.317913 0 133.565217 169.872696 133.565217 379.436522c0 139.709217 122.657391 315.169391 367.994435 526.402782z" fill="#FFA93D" p-id="1810"></path><path d="M317.551304 362.340174a184.008348 181.158957 0 1 0 368.016696 0 184.008348 181.158957 0 1 0-368.016696 0Z" fill="#FFFFFF" p-id="1811"></path></svg>',
'#904035'
);
</script>
</body>
</html>