vue3实现将远程图片链接旋转90度上传

最新推荐文章于 2024-06-27 16:39:50 发布

岁月如歌_

最新推荐文章于 2024-06-27 16:39:50 发布

阅读量355

点赞数 2

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

本文链接：https://blog.csdn.net/namechenfl/article/details/136059845

版权

const canvas = ref(null)


const handleRotate = (file) => {
  const index = imgUrlList.value.indexOf(file)
  const newFileList = imgUrlList.value
  const img = new Image()
  img.src = file
  )
  img.onload = function () {
    console.log(1111111)
    const ctx = canvas.value.getContext('2d')
    canvas.value.width = img.height
    canvas.value.height = img.width
    // 旋转图片90度
    // 旋转前，先将绘制原点（0,0）移动到画布的中心
    ctx.translate(canvas.value.width / 2, canvas.value.height / 2);
    ctx.rotate(Math.PI / 2)
    ctx.drawImage(img,-img.width / 2, -img.height / 2)
    const base64Image = canvas.value.toDataURL('image/png', 0.9)
    const blob = dataURLtoBlob(base64Image)
    const formData = new FormData()
    formData.append('image', blob, 'image.png')
    // 图片上传
    uploadAddApi(formData).then((res) => {
      if (!res) return false
      console.log(res, '旋转后的图片')
    })
  }
}
function dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }

  return new Blob([u8arr], { type: mime })
}