前端开发攻略---图片裁剪上传的原理

bbamx.

已于 2024-08-14 17:38:48 修改

阅读量118

点赞数 2

分类专栏：前端开发攻略文章标签： javascript 开发语言 ecmascript

于 2024-08-14 17:38:30 首次发布

本文链接：https://blog.csdn.net/nibabaoo/article/details/141196315

版权

前端开发攻略专栏收录该内容

48 篇文章 1 订阅

订阅专栏

1、预览本地图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" />
    <img class="preview" />
  </body>
  <script>
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    ipt.onchange = function (e) {
      const file = e.target.files[0] // 获取用户选择的第一个文件
      const fileReader = new FileReader() // 创建一个新的 FileReader 对象，用于读取文件。
      fileReader.onload = e => {
        // 当文件读取完成后，e.target.result 将包含文件的 URL，赋值给 <img> 元素的 src 属性，从而显示图片
        img.src = e.target.result
      }
      fileReader.readAsDataURL(file)
      //   console.log(file)
    }

  </script>
</html>

2、图片裁剪交互

裁剪交互比较简单，这里不在叙述。

3、上传裁剪区域

思路：

通过交互后的结果，获取到裁剪的宽度、高度、位置
根据这些参数通过canvas画出来
将canvas转换blob，再讲blob转换为file
将file对象上传到服务器

核心代码：

    function uploadCutResult({ cutWidth, cutHeight, cutX, cutY }) {
      const cvs = document.createElement('canvas')
      cvs.width = 200
      cvs.height = 200
      const ctx = cvs.getContext('2d')
      ctx.drawImage(img, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height)
      cvs.toBlob(blob => {
        // 拿到file对象
        const file = new File([blob], 'cut-png', { type: 'image/png' })
        console.log(file)
      })
    }

全部代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" />
    <img class="preview" />
    <button>模拟交互结果</button>
  </body>
  <script>
    const ipt = document.querySelector('input')
    const img = document.querySelector('img')
    const btn = document.querySelector('button')

    ipt.onchange = function (e) {
      const file = e.target.files[0]
      const fileReader = new FileReader()
      fileReader.onload = e => {
        img.src = e.target.result
      }
      fileReader.readAsDataURL(file)
      //   console.log(file)
    }

    function uploadCutResult({ cutWidth, cutHeight, cutX, cutY }) {
      const cvs = document.createElement('canvas')
      cvs.width = 200
      cvs.height = 200
      const ctx = cvs.getContext('2d')
      ctx.drawImage(img, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height)
      cvs.toBlob(blob => {
        // 拿到file对象
        const file = new File([blob], 'cut-png', { type: 'image/png' })
        console.log(file)
      })
    }

    // 模拟裁剪后的结果
    btn.onclick = function () {
      uploadCutResult({ cutHeight: 100, cutWidth: 200, cutX: 10, cutY: 10 })
    }
  </script>
</html>