本地图片（或者图片url）转为二进制（binary）

最新推荐文章于 2024-02-07 17:43:35 发布

原创最新推荐文章于 2024-02-07 17:43:35 发布 · 4.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #开发语言

该文章描述了一个JavaScript函数，用于将图片URL转换为Base64编码，并进一步转化为File对象。过程中涉及了跨域设置、HTML5Canvas的使用以及数据URL到File对象的转换。

该文章已生成可运行项目，

    imageUrlToBase64() {
      let image = new Image() // 一定要设置为let，不然图片不显示
      image.setAttribute('crossOrigin', 'anonymous') // 解决跨域问题
      // image.src = 'http://172.25.9.141:8089/images/rotation/379a713bb5cd4a82881870ac4b45bc5c.jpg' +"&v=" + Math.random() //网图，但是必须在同一个域内
      image.src = require('@/assets/login/demo.png') // 如果是本地图片替换为 image.src = imageUrl
      image.onload = () => {
        var canvas = document.createElement("canvas")
        canvas.width = image.width
        canvas.height = image.height
        var context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        var quality = 0.8
        var dataURL = canvas.toDataURL("image/jpeg", quality) // 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
        this.base64toFile(dataURL)
      }
    },
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)

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

      let file = new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
      console.log(file) //等同于用el-upload上传的file.raw
    },

该文章已生成可运行项目