前端各种类型文件的转换

蔚落 2022-04-27 20:02 551阅读 1赞

最近接到一个微信公众好的开发需求，拍照识别二维码并上传，踩了不少坑。有需要的小伙伴可以看看。还附有各种文件转化的方法，可以马克一下。

欢迎和我一起探讨交流~

### file文件的拷贝和改名 ###

// 复制文本域中的file文件并重命名
    let myFile = new File([file], "新文件的名字"]);
    复制代码复制代码

### bolb格式转base64格式 ###

function blobToDataURL(blob, callback) {
        let reader = new FileReader();
        reader.onload = function () { 
            callback(reader.result); 
        }
        reader.readAsDataURL(blob);
    }
    复制代码复制代码

### file格式转base64格式 ###

function blobToDataURL(file, callback) {
        let reader = new FileReader();
        reader.onload = function () { 
            callback(reader.result); 
        }
        reader.readAsDataURL(file);
    }
    复制代码复制代码

### base64格式的文件转blob格式 ###

//将base64转换为blob
    function dataURLtoBlob(dataURL) {
        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 Blob([u8arr], { type: mime });
    }
    复制代码复制代码

### base64格式的文件转file格式 ###

//将base64转换为blob
    function 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}.jpg`, { type: mime });
    }
    复制代码复制代码

### 通过 ajax 请求图片转base64格式 ###

let url = "当前域的xx图片地址";
    let xhr = new XMLHttpRequest();    
    xhr.open("get", url, true);
    xhr.responseType = "blob";
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
            let reader = new FileReader();
            reader.readAsDataURL(xhr.response);
            reader.onloadend = function(){
                let base64data = reader.result;
            }
        }
    }
    xhr.send();
    复制代码复制代码

### 通过img和canva获得base64格式的图片 ###

function getImgToBase64(url, callback){
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL('image/jpg');     callback(dataURL);
        canvas = null;
      };
      img.src = url;
    }
    复制代码复制代码

### file转blob格式，blob格式转file ###

// file转blob
    let blob = new Blob([file], {
         type: mimeType})
    // Blob转file
    let file = new File([blob], name, {
         type: mimeType})
    复制代码复制代码

### 微信sdk拍照识别二维码并上传 ###

// 需要提前调用wx.config初始化，这里就不展示了，然后调用微信拍照接口
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有'album', 'camera'
        success: res => {
          // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          var localId = res.localIds[0];
          wxGetLocalImgData(localId);
        },
        fail: res => {},
        cancel: res => {}
    });
    function wxGetLocalImgData(localId) {
       wx.getLocalImgData({
        localId: localId, // 图片的localID
        success: res =>  {
          // localData是图片的base64数据，可以用img标签显示
          // 如果是Android，需要增加base64的前缀
          let localData = res.localData;
          localData = window.__wxjs_is_wkwebview ? localData.replace('jgp', 'jpeg') : 'data:image/jpeg;base64,' + localData;
            // 这里已经拿到base64的文件了，可以做你想要的转换上传，也可以在这里识别二维码
            // 识别二维码需要用到一个库qrcode
            // 改造下，利用es6的模块方式引入
            qrcode.decode(dataUrl);
            qrcode.callback = (qrUrl) => {
                if (qrUrl === 'error decoding QR Code') {
                    console.log('二维码解析异常，请重新拍照')
                } else {
                    console.log(qrUrl)
                    // 你的上传方法
                    upload(localData);
                }
            }
        },
        fail: res => {}   
    }

``

`复制代码`

``

## `转微信拍照并识别二维码和前端各种类型文件的转换` ##

``

发表评论取消回复

表情：

评论列表（有 0 条评论，551人围观）

还没有评论，来说两句吧...

相关阅读

相关 golang中各种类型转换

文章目录基本数据之间的转换接口转其他类型 string 转切片切片转 string 数组转切片切片转数组 string

向右看齐/ 2022年08月31日 06:47/ 0 赞/ 206 阅读

相关 C++各种类型的转换（一）字符串

一、String 变成 char \ 使用string 的 c\_str()方法; string str = "abc"; char chars[10]

痛定思痛。/ 2022年08月26日 01:16/ 0 赞/ 186 阅读

相关 OC各种数据类型之间的转换方法

NSNumber转NSString: 假设现有一NSNumber的变量A，要转换成NSString类型的B 方法如下： NSNumberFormatter\ number

迈不过友情╰/ 2022年08月21日 04:55/ 0 赞/ 317 阅读

相关 Java杂谈之各种类型转换

在写程序时，难免会遇到类型转换的问题，下面列出了各种类型的转换方法，我们要做的只是会举一反三就可以了。 package JavaTestString;

青旅半醒/ 2022年08月10日 15:52/ 0 赞/ 169 阅读

相关 java之各种类型转换

1.date与String 的转换项目中由于有的时候虽然程序中日期为date类型但是数据库中存的是字符串这样无论是存还是都要互相转换 Simple

超、凢脫俗/ 2022年07月17日 03:52/ 0 赞/ 175 阅读

相关各种类型文件的Content-Type

介绍 Content-Type，即内容类型，一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码，决定文件接收方将以什么形式、什么编码读取这个

爱被打了一巴掌/ 2022年06月05日 11:47/ 0 赞/ 277 阅读

相关各种文件之间的转换

一、把PPT转WORD形式的方法　 1．利用"大纲"视图　　打开PPT演示文稿，单击"大纲"，在左侧"幻灯片/大纲”任务窗格的“大纲”选项卡里单击一下鼠标，按"Ctrl+A

野性酷女/ 2022年06月02日 04:25/ 0 赞/ 254 阅读

相关前端各种类型文件的转换

最近接到一个微信公众好的开发需求，拍照识别二维码并上传，踩了不少坑。有需要的小伙伴可以看看。还附有各种文件转化的方法，可以马克一下。欢迎和我一起探讨交流~ file文件

蔚落/ 2022年04月27日 20:02/ 1 赞/ 552 阅读

相关 js类型转换的各种玩法

前言对于object和number、string、boolean之间的转换关系 \[ \] Object 与Primitive，需要Object转为Primitiv

分手后的思念是犯贱/ 2022年03月07日 08:50/ 0 赞/ 213 阅读

相关各种类型间转换

String s = String.valueOf( value); // 其中 value 为任意一种数字类型。　　字符串型转换成各种数字类型：　　String s...

朱雀/ 2020年10月31日 18:45/ 0 赞/ 626 阅读