使用 canvas 居中裁剪图片

最新推荐文章于 2024-08-10 11:53:46 发布

人可如月

最新推荐文章于 2024-08-10 11:53:46 发布

阅读量1.5k

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/small_cutey/article/details/125112819

版权

本文介绍了在开发中处理图片上传时，如何利用canvas进行居中裁剪，确保图片尺寸不超过预设限制。通过drawImage()方法，结合图片原始尺寸和目标裁剪尺寸，实现图片的居中裁剪。示例代码展示了从文件选择到裁剪、转换为blob并上传的完整流程。

摘要由CSDN通过智能技术生成

在日常开发中，想必不少小伙伴有涉及到图片上传的功能，今天我们就来捋一捋上传图片时，如果图片大于规定尺寸，用 canvas 居中裁剪。

首先我们来熟悉一下 canvas 的 drawImage（）的用法：

drawImage（）向画布上面绘制图片：

这里因为自己曾经掉过这个参数的坑，所以我解释下个别参数

1. width 要使用图片的宽度：就是裁剪完成后你想要的图片的宽度

2. height 要使用图片的高度：就是裁剪完成后你想要的图片的高度

裁剪主要是要掌握 drawImage 参数，我们来看一张图理解下drawImage 参数：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

<input type="file" name="file" id="file" />
<canvas id="clipImg" style="border:1px solid red"></canvas>

<script>
  <input type="file" name="file" id="file" />
  <canvas id="clipImg" style="border:1px solid red"></canvas>
  <script>
    var eleFile = document.querySelector('#file');
    // 压缩图片需要的一些元素和对象
    var reader = new FileReader(), img = new Image();
    // 选择的文件对象
    var file = null;
    var canvas = document.getElementById('clipImg')
    var context = canvas.getContext('2d');

    // base64地址图片加载完毕后
    img.onload = function () {
      // 图片原始尺寸
      var originWidth = this.width;
      var originHeight = this.height;
      // 最终要裁剪到的尺寸
      var maxWidth = 120, maxHeight = 120;  //裁剪成120*120的大小
      //目标尺寸 targetWidth
      var targetWidth = originWidth, targetHeight = originHeight;
      // 先取最短边（长或者宽）
      let xStart, yStart    //开始裁剪x轴的坐标，和y轴的坐标
      if (originWidth > originHeight) {
        // 判断最短边，因为我们要裁的最终的图片是长宽相等的，所以裁剪时取最短的
        targetHeight = originHeight;
        targetWidth = originHeight;
        xStart = (originWidth - targetWidth) / 2   // 裁剪x轴的坐标,因为是居中裁剪，所以是取中间开始截取
        yStart = 0
      } else {
        targetHeight = originWidth;
        targetWidth = originWidth
        xStart = 0
        yStart = (originWidth - targetWidth) / 2
      }

      // 清除画布
      context.clearRect(0, 0, maxWidth, maxHeight);
      canvas.width = maxWidth
      canvas.height = maxHeight

      context.drawImage(img, xStart,yStart, targetWidth, targetHeight, 0, 0, maxWidth, maxHeight);
      // canvas转为blob并上传
      canvas.toBlob(function (blob) {
        console.log(blob, 'blob')
        // 转成blob,这里可以ajax上传到后台
      }, 'image/png');
    };

    // 文件base64化，以便获知图片原始尺寸
    reader.onload = function (e) {
      img.src = e.target.result;
    };
    eleFile.addEventListener('change', function (event) {
      file = event.target.files[0];
      // 选择的文件是图片
      if (file.type.indexOf("image") == 0) {
        reader.readAsDataURL(file);
      }
    });
  </script>