javascript - 如何给canvas图片的轮廓描边?

Question

如图，如何给透明背景的canvas图片的轮廓描边。

尝试过几个方案，但是达不到想要的效果

Answer 1

要在Canvas上给图片轮廓描边，你可以使用CanvasRenderingContext2D API 的 stroke() 和 beginPath() 方法。首先，你需要使用 getImageData() 来获取图片像素数据，然后根据这些像素数据绘制出轮廓。下面是一个简单的步骤指南和代码示例，它演示了如何实现这个功能：

步骤指南：

1. 加载图片：使用 new Image() 创建一个新的图片对象，并设置其 src 属性为你的图片URL。
2. 等待图片加载：在图片对象的 onload 事件处理器中执行描边操作。
3. 获取Canvas上下文：使用 getContext('2d') 获取Canvas的2D渲染上下文。
4. 绘制图片：使用 drawImage() 方法将图片绘制到Canvas上。
5. 获取像素数据：使用 getImageData() 获取图片的像素数据。
6. 遍历像素数据：遍历每个像素，找到边缘像素（即与其相邻像素颜色有显著差异的像素）。
7. 描边：对于每个检测到的边缘像素，使用 beginPath() 和 moveTo()/lineTo() 方法绘制轮廓。
8. 设置线条样式：使用 strokeStyle 和 lineWidth 设置线条的颜色和宽度。
9. 描边并清除：使用 stroke() 描边，然后使用 clearRect() 清除原始图片，只留下轮廓。

代码示例：

const canvas = document.querySelector('canvas'); // 获取canvas元素const ctx = canvas.getContext('2d'); // 获取2D渲染上下文const img = new Image(); // 创建新的图片对象img.onload = () => {  // 图片加载完成后执行的操作  canvas.width = img.width; // 设置canvas宽度  canvas.height = img.height; // 设置canvas高度    // 绘制图片  ctx.drawImage(img, 0, 0);    // 获取像素数据  const imageData = ctx.getImageData(0, 0, img.width, img.height);  const data = imageData.data;    // 遍历像素数据  for (let y = 0; y < img.height; y++) {    for (let x = 0; x < img.width; x++) {      const index = (y * img.width + x) * 4;      // 根据像素颜色判断是否为边缘像素（这里只是一个简单的示例，你可能需要更复杂的算法来检测边缘）      if (isEdgePixel(data, x, y, img.width)) {        // 如果是边缘像素，记录坐标        edgePoints.push({x, y});      }    }  }    // 描边  ctx.beginPath();  edgePoints.forEach((point, index) => {    if (index === 0) {      ctx.moveTo(point.x, point.y);    } else {      ctx.lineTo(point.x, point.y);    }  });  ctx.strokeStyle = 'black'; // 设置线条颜色  ctx.lineWidth = 5; // 设置线条宽度  ctx.stroke(); // 描边    // 清除原始图片  ctx.clearRect(0, 0, img.width, img.height);};img.src = 'path_to_your_image.png'; // 设置图片源路径// 边缘像素检测函数（这里只是一个简单的示例，你可能需要更复杂的算法）function isEdgePixel(data, x, y, width) {  const threshold = 50; // 设置颜色阈值  const index = (y * width + x) * 4;  const r = data[index];  const g = data[index + 1];  const b = data[index + 2];    // 检查当前像素及其相邻像素的颜色差异  const isEdge =     Math.abs(r - data[(y * width + Math.max(x - 1, 0)) * 4]) > threshold ||    Math.abs(g - data[(y * width + Math.max(x - 1, 0)) * 4 + 1]) > threshold ||    Math.abs(b - data[(y * width + Math.max(x - 1, 0)) * 4 + 2]) > threshold ||    // ... 添加更多相邻像素的检查 ...    ;    return isEdge;}