canvas生成base64转换成可上传文件

最新推荐文章于 2023-08-10 18:04:53 发布

ZhuYuanLe

最新推荐文章于 2023-08-10 18:04:53 发布

阅读量374

点赞数

文章标签： js

本文链接：https://blog.csdn.net/zhuyuanle/article/details/113700800

版权

该博客介绍了如何通过canvas处理图片，确保容器宽度与图片大小匹配，然后将base64编码转换为file文件，以便进行上传操作。

摘要由CSDN通过智能技术生成

const image = new Image()
    image.setAttribute('crossOrigin', 'Anonymous') // 解决某些图片跨域（有些图片仍不可使用)
    image.src = 'url'
    image.onload = (img) => {
      let base64 = setBase64(img)
      var arr = base64.split(',')
      var mime = arr[0].match(/:(.*?);/)[1] // 获取图片的类型 （image/jpg)
      var bstr = atob(arr[1]) // 将base64转码
      var n = bstr.length // 获得转码长度
      var u8arr = new Uint8Array(n) // 获得length个为0的数组
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n) // 获得unicode码
      }
      this.file = new File([u8arr], '文件名', { type: mime }) // 生成文件
      console.log(this.file)
      this.url = base64
    }

    function setBase64(img) {
      const ctx = document.createElement('canvas')
      const c = ctx.getContext('2d')
      ctx.width = img.path[0].width 
      ctx.height = img.path[0].height
      c.drawImage(img.path[0], 0, 0, img.path[0].width, img.path[0].height)
      let ext = image.src
        .substring(image.src.lastIndexOf('.') + 1)
        .toLowerCase() // 获取图片后缀
      const url = ctx.toDataURL(`image/${ext}`)
      return url
    }