canvasをつかって画像を歪ませる 📷

ほんのりと画像を歪ませる検証をしたく、npmを探したり、PixiJSのDisplacementFilterを試したりしてみたのですが、検証なので力技で自作した方が手っ取り早かろうということで自作してみました。

本当はシェーダーでできそうな気がするのですが、力技なんで、画像を横方向に1pxごと切りとって、中心からの距離に応じてスケールを変化させて貼り付けています。
センターの算出を雑に行っているので、横幅が偶数のときに1pxずれているのですが、検証なのでそこは良しとしましょう。

JavaScript

function getCurveCanvas(img, rate) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const subCanvas = document.createElement('canvas');
  const subCtx = subCanvas.getContext('2d');

  canvas.width = img.width;
  canvas.height = img.height;

  subCanvas.width = 1;

  for (let i = 0; i < canvas.width; ++i) {
    const height = getHeight(i);

    subCanvas.height = canvas.height;

    subCtx.drawImage(img, -i, 0);
    ctx.drawImage(subCanvas, i, (img.height - height) / 2, 1, height);
  }

  return canvas;

  function getHeight(i) {
    const center = img.width / 2;

    return Math.sin((1 - Math.abs(i - center) / center * rate) * Math.PI / 2) * img.height;
  }
}

DEMO

develop.kimizuka.org