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

news2024/9/20 14:43:24

编辑

1、预览本地图片

2、图片裁剪交互

3、上传裁剪区域

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2039796.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！