标签：canvas rotate const img 旋转 file height 上传 图片

 思路：采用element的图片上传图片组件el-upload，上传图片后，canvas绘制旋转后的图片，将canvas绘制出来的base64文件转化成file文件上传

关键代码：

 <el-form :model="formLabelAlign">
        <el-form-item class="is-required">
          <el-upload
            v-model="formLabelAlign.result_pic_path"
            class="upload-demo"
            drag
            action="#"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <div v-if="imageUrl" ref="imgWrap" class="rectify-img">
              <img ref="rectifyImg" :src="imageUrl">
              <div class="delete icon" @click.stop="handleDelete" />
              <div class="rotate icon" @click.stop="handleRotate" />
            </div>
            <div v-else>
              <div class="img-dragger-wrap">
                <i class="el-icon-plus" />
                <div class="el-upload__text">拖动图片到此处</div>
              </div>
              <el-button type="primary" size="medium">选择文件</el-button>
            </div>
          </el-upload>
          <span class="upload-tip">(大小：20M以内   格式：jpg、png、bmp、tif   分辨率：不小于112*112)</span>
        </el-form-item>
      </el-form>

校验图片大小、图片格式、分辨率等

   beforeAvatarUpload(file) {
      this.imageUrl = URL.createObjectURL(file)
      this.file = file
      const _this = this
      const imgAccept = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/bmp' || file.type === 'image/tif'
      if (!imgAccept) {
        this.imageUrl = ''
        this.$message.error('不支持此图片格式，请更换图片')
        return false
      }
      const isLt20M = file.size / 1024 / 1024 < 20
      if (!isLt20M) {
        this.$message.error('上传头像图片大小不能超过 20MB!')
      }
      const isSize = new Promise(function(resolve, reject) {
        const _URL = window.URL || window.webkitURL
        const img = new Image()
        img.onload = function() {
          const valid = img.width >= 112 && img.height >= 112
          valid ? resolve() : reject()
        }
        img.src = _URL.createObjectURL(file)
      }).then(() => {
        return file
      }, () => {
        this.imageUrl = ''
        _this.$message.error('不支持此分辨率图片，请更换图片')
        return false
      }).catch(e => {
        console.log(e)
      })
      return imgAccept && isSize && isLt20M
    }

旋转上传功能

 handleRotate() {
      this.rotate += 90
      if (this.rotate >= 360) {
        this.rotate = 0
      }
      const that = this
      this.$refs.rectifyImg.style.transform = `rotate(${this.rotate}deg)`
      const img = new Image()
      img.src = this.imageUrl
      console.log('this.imageUrl', this.imageUrl)
      img.onload = function() {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = img.width
        canvas.height = img.height
        if (that.rotate === 0) {
          ctx.drawImage(img, 0, 0)
        } else if (that.rotate === 90) {
          canvas.width = img.height
          canvas.height = img.width
          ctx.translate(canvas.width / 2, canvas.height / 2)
          ctx.rotate((that.rotate * Math.PI) / 180)
          ctx.drawImage(img, -canvas.height / 2, -canvas.width / 2)
        } else if (that.rotate === 180) {
          ctx.rotate((that.rotate * Math.PI) / 180)
          ctx.drawImage(img, -img.width, -img.height)
        } else {
          canvas.width = img.height
          canvas.height = img.width
          ctx.translate(canvas.width / 2, canvas.height / 2)
          ctx.rotate((that.rotate * Math.PI) / 180)
          ctx.drawImage(img, -canvas.height / 2, -canvas.width / 2)
        }
        const ndata = canvas.toDataURL('image/jpeg', 1.0)
        that.file = that.dataURLtoFile(ndata)
      }
    },

将base64转换为文件

  dataURLtoFile(dataurl) {
      var arr = dataurl.split(',')
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], 'image', {
        type: 'image'
      })
    },

将this.file上传即是旋转后的图片

标签：canvas,rotate,const,img,旋转,file,height,上传,图片
来源： https://blog.csdn.net/qq_33168578/article/details/121036769

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。