图片的各种转换

项目中遇到的一些处理图片的方法，这里简单做个总结

1. 判断所选文件是否为图片

正则判断image类型即为图片

onChange(file) {
    if (!(/^image\/.*$/i.test(file.type))) {
        this.$message.error("请选择图片")
        return
    }
},

2. 图片文件转base64

在一些选择图片回显之类的操作中可能会用到

onChange(file) {
    let _this = this
    let freader = new FileReader()
    freader.readAsDataURL(file)
    freader.onload = function (e) {
        _this.imgUrl = e.target.result
    }
},

3. 验证网络图片地址是否为图片

可以用new Image()的特性作为判断

isImageUrl(imgurl) {
    let _this = this
    let ImgObj = new Image()
    ImgObj.src = imgurl
    ImgObj.onerror = ()=> {
        this.$message.error("图片地址错误")
        return false
    }
    ImgObj.onload = () => {
        if (ImgObj.width > 0 && ImgObj.height > 0) {
            // 是图片
            _this.imgUrl = imgurl
        } else {
            this.$message.error("图片地址错误")
            return false
        }
    }
}

4. 网络图片转blob对象

转为blob可以优化加载速度，同时也方便后续转为base64

urlToBlob(imgurl) {
  let _this = this
  let xhr = new XMLHttpRequest();
  xhr.open('get', imgurl, true);
  xhr.responseType = 'blob';
  xhr.onload = function (res) {
    if (res.target.status === 200) {
      let imgBlob = res.target.response
    }
  };
  xhr.send();
},

5. blob转base64

方便后面base64转file文件(如果需要的话)

blobToUrl(blob) {
  let _this = this
  let freader = new FileReader();
    freader.readAsDataURL(blob);
    freader.onload = function (e) {
      _this.imgUrl = e.target.result
    }
},

6. base64转file文件

当需要上传file文件时，可以这么干

// dataurl: base64, filename: 文件名, filetype: 文件类型(例: image/jpeg)
baseToFile(dataurl,filename,filetype) {
  let arr = dataurl.split(",")
  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, {
    type: filetype
  })
},

7. 文件重命名

有时候受命名规范影响时，可以这么干

onChange(file) {
  let type = file.type.split('/')
  const renameFile = new File([file], 'newName' + type[1], {type: file.type})
  console.log(renameFile)
},

8. file文件转url

不知道干啥用，凑个篇幅，有用的就用一下

getObjectURL(file) {
  let url = ""
  if (window.createObjectURL !== undefined) {
    // basic
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) {
    // mozilla(firefox)
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) {
    // webkit or chrome
    url = window.webkitURL.createObjectURL(file)
  }
  return url
},

好了，感觉不写点文字，被提示文章不规范，这里就凑下字数，请自动忽略~