Canvas 实现 background cover效果(图片裁剪)

上回我们实现了 background 的效果,但是我们的代码只能达到一个填充缩放的效果,在不同的窗口大小,会导致图片的变形。如果是 background:cover 的效果则相当理想,它相当于需要我们把大的那一边居中对齐。

这里我们用到了使用图像 Using images 中的切片示例,简单的展示了如何处理:

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

sx / sy / sWidth / sHeight 是对原图的操作,对于切下来的图片,dx / dy / dWidth / dHeight 是切好的图像对于画布的相对操作。

理解了参数的含义,之后就比较好办了,直接用我们自己推导的公式求值裁边:

          const imageWidth = image.width;
          const imageHeight = image.height;
          const imageRatio = imageWidth / imageHeight;
          const canvasRatio = background.clientWidth / background.clientHeight;
          let sx, sy, sHeight, sWidth;
          if (imageRatio < canvasRatio) {
            sWidth = imageWidth;
            sHeight = sWidth / canvasRatio;
            sx = 0;
            sy = (imageHeight - sHeight) / 2;
          } else {
            sHeight = imageHeight;
            sWidth = imageHeight * canvasRatio;
            sy = 0;
            sx = (imageWidth - sWidth) / 2;
          }
          ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, background.clientWidth, background.clientHeight);

最终我们就实现了 cover 的效果。

(这篇文章我承认确实不太走心但昨天推公式推晕了不堪回首……)

如果您觉得文章不错,可以通过赞助支持我

标签: 知识, 代码段, canvas

添加新评论