canvas图片裁剪demo

Hico、

已于 2024-01-23 16:44:05 修改

阅读量121

点赞数

文章标签： javascript 前端开发语言

于 2023-08-03 14:20:33 首次发布

本文链接：https://blog.csdn.net/m0_66675766/article/details/132082604

版权

<!DOCTYPE html>
<html>
<head>
  <title>Image Cropping</title>
</head>
<body>
  <input type="file" id="fileInput" accept="image/*">
  <canvas id="canvas"></canvas>
  <script>
    // 获取input框
    const fileInput = document.getElementById('fileInput');
    // 初始化canvas
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    // 监听input框里面的变化
    fileInput.addEventListener('change', (event) => {
      // 获取文件
      const file = event.target.files[0];
      // 读取文件[对象]
      const reader = new FileReader();
      // 读取完成后执行回调
      reader.onload = function (event) {
        // 创建一个Image[对象]
        const img = new Image();
        // 监听加载完成后执行回调函数
        img.onload = function () {
          const x = 100; // 切割区域的起始横坐标
          const y = 100; // 切割区域的起始纵坐标
          const width = 200; // 切割区域的宽度
          const height = 200; // 切割区域的高度
          // 设置Canvas的宽度和高度为图片的宽度和高度
          canvas.width = img.width;
          canvas.height = img.height;
          // 通过drawImage方法，在Canvas上绘制完整的图片
          ctx.drawImage(img, 0, 0);
          // 通过getImageData方法执行切割操作，返回一个裁剪的ImageData对象
          const croppedImageData = ctx.getImageData(x, y, width, height);
          canvas.width = width;
          canvas.height = height;
          // 通过putImageData方法，将切割后的ImageData渲染到Canvas上
          ctx.putImageData(croppedImageData, 0, 0);
        };
        img.src = event.target.result;
        // console.log('-base64:-->>>',img.src);
      };
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>