在非透明图像周围修剪-10px

Question

有没有一种方法可以精确修剪 HTML5 Canvas 中不透明图像的边缘？

示例：

输入：

输出：

Answer 1

我在下面添加示例代码

const loadImageFromBase64 = async() => {
  const base64Data = `data:image/png;base64,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`;
  //this is base64 code of your origin image with black border.
  const img = await loadImage(base64Data);
  drawImageToCanvas(img);
};

const loadImage = (src) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
};

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const drawImageToCanvas = (img) => {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

const convertImage = () => {
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  for (let i = 0; i < data.length; i += 4) {
    if (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) {
      data[i] = data[i + 1] = data[i + 2] = 255;
    }
  }

  ctx.putImageData(imageData, 0, 0);
};

window.onload = loadImageFromBase64;

<canvas id="myCanvas" width="500" height="500" style="border: 1px solid #000"></canvas>
<button onclick="convertImage()">convert</button>