vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式

更新時間：2024年03月07日 09:53:07 作者：汪小敏同學

這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取

import html2canvas from "html2canvas";
export   function  base64ImgtoFile(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)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
      type: mime
    })
  }
 
 
  export   function toImages(imageTofile) {
    return new Promise((resolve, reject) => {
      html2canvas(imageTofile, {
        backgroundColor: null,
        useCORS: true 
      }).then((canvas) => {
        const url = canvas.toDataURL('image/png');
          resolve(base64ImgtoFile(url))
      }).catch((err) => {
        reject(err)
      })
    })
  }

// 調(diào)用  

  toImage() {
      let that=this;

       toImages(this.$refs.imageTofile).then((imgFileRaw) => {
      that.imgFileRaw = base64ImgtoFile(this.htmlUrl);

    }).catch((error) => {
      that.imgFileRaw = null;

    });

    },

vue中base64和file文件類型互相轉(zhuǎn)換

如圖需求，上傳文件后要求支持圖片的預覽，裁剪，放大和縮小，利用vue-cropper實現(xiàn)，elemeng-ui的上傳組件之后是file文件類型，需要轉(zhuǎn)換成base64在右側(cè)區(qū)域進行展示預覽。

             // 組件dom結(jié)構(gòu)，on-change鉤子函數(shù)綁定
                    <el-upload
                    class="upload-demo"
                    drag
                    :show-file-list="false"
                    :auto-upload="false"
                    action="https://jsonplaceholder.typicode.com/posts/"            
                    :on-change="previewImage"
                    multiple>
                    <div v-if="!loading" class="el-upload__text" style="font-size: 16px;color: #68718C;">將圖片拖到此處，或<em>點擊上傳</em>或拍照</div>
                </el-upload>

file轉(zhuǎn)base64，下圖代碼中的file參數(shù)為el-upload上傳組件中鉤子函數(shù)的file參數(shù)

            var URL = null
            if (window.createObjectURL !== undefined) {
                URL = window.createObjectURL(file.raw)
            } else if (window.URL !== undefined) {
                URL = window.URL.createObjectURL(file.raw)
            } else if (window.webkitURL !== undefined) {
                URL = window.webkitURL.createObjectURL(file.raw)
            }
            this.option.img = URL
//option為組件vue-cropper中綁定的data值，img獲得轉(zhuǎn)化后的base64格式的URL就可以在cro-pperjs中進行展示

預覽使用cropper組件的鉤子函數(shù)

        clip(){//對圖片進行裁剪
            this.$refs.cropper.getCropData((data) => {
                this.localUrl = data //img的src屬性指定locaUrl就可以實現(xiàn)預覽
                console.log(data,'裁剪之后的圖片地址')
                sessionStorage.setItem('imageToBase64',this.localUrl)
                // this.subFileList = this.dataURLtoFile(this.localUrl, this.file.name)
            })             
        },

做的寧外一個需求也是肖像上傳，需要在本地實現(xiàn)預覽功能，同時后臺接口傳遞的是file文件類型，傳參方式使用的FormData表單形式

預覽的還是使用vue-cropper組件，效果如圖，轉(zhuǎn)化代碼如下

        // base64轉(zhuǎn)file，dataurl為base64地址，filename為文件名稱，自定義即可
        dataURLtoFile(dataurl, filename) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length; 
            let u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, {type:mime}, {uid: 1111111111111});
        },