js+canvas实现图片裁剪

 html

 <canvas id="canvas" width="800" height="800" style="border: 1px solid #000;"></canvas>
  <input id="input" type="file">
  <button id="btn">确定裁剪</button>

javaScript

const canvas = document.getElementById("canvas")
    const ctx = canvas.getContext("2d")
    let image = null
    let starX = 0
    let starY = 0
    let endX = 0
    let endY = 0
    let isdraging = false
    // 图片加载
    const loadImage = (file) => {
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        image = new Image()
        image.onload = () => {
          ctx.drawImage(image, 0, 0, 800, 800)
        }
        image.src = e.target.result
      }


    }
    // 选择图片
    const fileInput = document.getElementById("input")
    fileInput.addEventListener("change", (e) => {
      const file = e.target.files[0]
      loadImage(file)
    })
    // 选择绘制区域
    canvas.addEventListener("mousedown", (e) => {
      if (isdraging) return
      isdraging = true
      starX = e.offsetX
      starY = e.offsetY
      endX = starX
      endY = starY
    })
    // 绘制矩形
    canvas.addEventListener("mousemove", (e) => {
      if (!isdraging) return
      endX = e.offsetX
      endY = e.offsetY
      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布中所有矩形
      ctx.drawImage(image, 0, 0, 800, 800)
      // ctx.fillStyle = "rgba(0,0,0,.5)" // 矩形填充颜色
      ctx.lineWidth = "1"
      ctx.setLineDash([4, 2])
      ctx.lineDashOffset = 0
      ctx.strokeStyle = "pink"
      // ctx.fillRect(starX, starY, endX - starX, endY - starY)  // 画矩形
      ctx.strokeRect(starX, starY, endX - starX, endY - starY)
      // 绘制完成后需要将矩形之外的其他地方渲染为半透明颜色（4个矩形）
      ctx.fillStyle = "rgba(255, 192, 203, 0.3)"
      ctx.fillRect(0, 0, starX, canvas.height) // 左侧矩形
      ctx.fillRect(endX, 0, canvas.width - endX, canvas.height) // 右侧矩形
      ctx.fillRect(starX, 0, endX - starX, starY) // 顶部矩形
      ctx.fillRect(starX, endY, endX - starX, canvas.height - endY) // 底部矩形

    })
    canvas.addEventListener("mouseup", (e) => {
      isdraging = false
    })
    
    const btn = document.getElementById("btn")
    btn.addEventListener("click", (e) => {
      const aLink = document.createElement("a") // 创建一个a标签可以用来下载
      const cropCanvas = document.createElement("canvas")
      const cropCtx = cropCanvas.getContext("2d")
      const width = endX - starX
      const height = endY - starY
      cropCanvas.width = width
      cropCanvas.height = height
      cropCtx.drawImage(canvas, starX + 1, starY + 1, width - 2, height - 2, 0, 0, width, height)
      const url = cropCanvas.toDataURL()
      // 将canvas放入a标签
      aLink.download = "crop-image.png"
      aLink.href = url
      aLink.appendChild(cropCanvas)
      document.body.appendChild(aLink)


    })