base64转二进制文件流
万次阅读
2018-10-23 19:10:34
现在的项目中对于图片的处理很多，对于图片的URL转Base64或者Base64转文件流很是不好处理，下面我总结了这两种方法互转的代码，希望对你有所帮助。

图片URL 转Base64
```
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var imgLink = "你的图片URL";
var tempImage = new Image();
tempImage.crossOrigin = "*";
tempImage.onload = function(){
var base64 = getBase64Image(tempImage);
    console.log(base64);
}
tempImage.src = imgLink;
```
上面的代码其实对于大家并不是很陌生，最主要的事先有canvas把你所需要的图片画出来，然后利用toDataURL把图片转成Base64，看到这里是不是觉得其实很简单并没有自己想的那么难！

Base64转二进制文件流
```
function dataURLtoBlob(baseurl) {
    let arr = baseurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {
        type: mime
    });
}
```
上面这段代码就是讲你得到的Base64转成二进制流的方法，这里面split() match() 这两个方法不用说了很简单，其中atob()方法可能有一部分同学会觉得很陌生，其实这就是window提供的一种解码方法：

atob()方法

WindowOrWorkerGlobalScope.atob() 函数对已经使用base-64编码编码的数据字符串进行解码。您可以使用该btoa()方法对可能导致通信问题的数据进行编码和传输，然后将其传输并使用该atob()方法再次解码数据。例如，您可以对控制字符（如 ASCII 值0到 31）进行编码，传输和解码。

想要深入了解的同学可以去度娘一下！下面就是charCodeAt()这方法其实也是很简单下面说一下他的作用以及用法：

charCodeAt()定义和用法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

到这里大家就可以开开心心的把你的Base64转成你的二进制文件流了！
更多相关内容

base64转二进制文件流并显示

2022-06-21 14:03:17

2.base转二进制文件流 3.填坑字符串中不含否则解码报错，不解码也无法加载

base64转二进制文件流并显示

1.判断base类型这里提供图片和pdf

  function base64FileHeaderMapper(fileBase64) {
    let fileHeader = new Map();
    //获取不同文件的文件头前3个字作为判断依据
    fileHeader.set("/9j", "jpeg");
    fileHeader.set("iVB", "png");
    // fileHeader.set("Qk0", "BMP")
    // fileHeader.set("SUk", "TIFF")
    fileHeader.set("JVB", "pdf");
    // fileHeader.set("UEs", "OFD")
    let res = "";
    //遍历map中所提及的文件头特征
    fileHeader.forEach((v, k) => {//IE不支持箭头函数  兼容IE需要改写
      if (k == fileBase64.substr(0, 3)) {
        res = v;
      }
    });
    //如果不在map中返回unknown file
    if (res == "") {
      res = "unknown file";
    }
    //否则返回map中的value值
    return res;
  }

2.base转二进制文件流

  function base64ToBlob(code, type) {
    code = code.replace(/[\n\r]/g, "");
    let raw = window.atob(code);
    let rawLength = raw.length;
    let uint8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    if ("pdf" === type) {
      return new Blob([uint8Array], { type: "application/pdf" });
    } else {
      return new Blob([uint8Array], { type: "image/jpeg" });
    }
  }

3.填坑

base64 字符串中不含 data:application/pdf;base64,
否则 window.atob(code);解码报错，不解码也无法加载pdf

在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>base转二进制</title>
</head>

<body>
  <div style="width: 100vw;height: 100vh">
    <iframe width="100%" height="100%" src="" frameborder="0" id="iframe"></iframe>
  </div>
  <script>
    let iframe = document.getElementById("iframe")
    let base = "JVBERi0xLjQKJdPr6eEKMSAwIG9iago8PC9DcmVhdG9yIChNb3ppbGxhLzUuMC..."; //base64不完整
    let s = base64FileHeaderMapper(base);
    let blob = base64ToBlob(base, s);
    iframe.src = URL.createObjectURL(blob);

    function base64FileHeaderMapper(fileBase64) {
      let fileHeader = new Map();
      //获取不同文件的文件头前3个字作为判断依据
      fileHeader.set("/9j", "jpeg");
      fileHeader.set("iVB", "png");
      // fileHeader.set("Qk0", "BMP")
      // fileHeader.set("SUk", "TIFF")
      fileHeader.set("JVB", "pdf");
      // fileHeader.set("UEs", "OFD")
      let res = "";
      //遍历map中所提及的文件头特征
      fileHeader.forEach((v, k) => {//箭头函数IE不支持 兼容IE需改写
        if (k == fileBase64.substr(0, 3)) {
          res = v;
        }
      });
      //如果不在map中返回unknown file
      if (res == "") {
        res = "unknown file";
      }
      //否则返回map中的value值
      return res;
    }

    function base64ToBlob(code, type) {
      code = code.replace(/[\n\r]/g, "");
      let raw = window.atob(code);
      let rawLength = raw.length;
      let uint8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      if ("pdf" === type) {
        return new Blob([uint8Array], {
          type: "application/pdf"
        });
      } else {
        return new Blob([uint8Array], {
          type: "image/jpeg"
        });
      }
    }
  </script>
</body>

</html>

收起

展开全文

javascript html

前端纯js处理图片URL转Base64，Base64转二进制文件流

千次阅读 2019-11-28 17:51:10

前端纯js处理图片URL转Base64，Base64转二进制文件流图片地址新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定...

   <input type="file" accept="image/*"/>
   <script>
    readLocalFile(e) {
            let localFile = document.getElementById('uploadFile').files[0]
            if (!localFile || localFile.size == 0) {
                return
            }

            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled = true
            // this.files.push(localFile)
            //获取图片base64代码
            var formData = new FormData()
            if (localFile.size / 1024 > 3073) {
                //压缩上传
                var reader = new FileReader() //新建一个FileReader对象
                var content
                var base64url
                this.files.push(localFile)
                var current = this
                content = reader.readAsDataURL(localFile, 'UTF-8') //将读取的文件转换成base64格式
                reader.onload = function(e) {
                    content = e.target.result //转换后的文件数据存储在e.target.result中
                    //   ================================================
                    let image = new Image() //新建一个img标签（还没嵌入DOM节点)
                    image.src = e.target.result
                    image.onload = function() {
                        let canvas = document.createElement('canvas'),
                            context = canvas.getContext('2d'),
                            imageWidth = image.width / 5, //压缩后图片的大小
                            imageHeight = image.height / 5,
                            data = '',
                            form = ''

                        canvas.width = imageWidth
                        canvas.height = imageHeight

                        context.drawImage(image, 0, 0, imageWidth, imageHeight)
                        data = canvas.toDataURL('image/jpeg')
                        //压缩完成
                        // console.log('压缩完成', data)
                        current.imgs.push(data)
                        form = current.dataURLtoFile(data, localFile.name)

                        formData.append('file', form)
                        current.$Equip.UploadController.fileUpload(formData)
                            .then(res => {
                                if (res.code == 0) {
                                    current.$refs.addSafeBtn.disabled = false
                                    current.$$tip({
                                        content: res.msg
                                    })
                                    current.isImg = true //可点击
                                    current.fileList.push(res.bean) //添加到
                                } else {
                                    current.$$tip({
                                        content: res.msg
                                    })
                                }
                            })
                            .catch(res => {
                                console.log(res)
                            })
                    }
                    //   ================================================
                }
            } else {
                //原图上传
                var reader = new FileReader()
                var content
                var base64url
                this.files.push(localFile)
                var current = this
                content = reader.readAsDataURL(localFile, 'UTF-8')
                reader.onload = function(event) {
                    content = event.target.result
                    base64url = event.target.result
                    current.imgs.push(content) //展示的
                }
                reader.onerror = function(event) {
                    alert('error')
                }

                formData.append('file', this.files[this.files.length - 1])
                current.$Equip.UploadController.fileUpload(formData)
                    .then(res => {
                        if (res.code == 0) {
                            this.fileList.push(res.bean) //添加到
                            this.$refs.addSafeBtn.disabled = false
                            this.$$tip({
                                content: res.msg
                            })
                            this.isImg = true //可点击
                        } else {
                            this.$$tip({
                                content: res.msg
                            })
                        }
                    })
                    .catch(res => {
                        console.log(res)
                    })
            }
        },
        //将base64转换为文件
        dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new File([u8arr], filename, { type: mime })
        },
</script>

收起

展开全文

图片文件转换成二进制流并进行base64编码
2021-01-20 08:54:00

base64格式图片转换成二进制流并生成图片文件（阅读量1.2w） /** * 图片转换为base64格式 * * @param bitmap 位图 * @return */ @TargetApi(Build.VERSION_CODES.O) public static String bitmapToBase64...

收起

base64 转file文件流和base64转二进制

2022-05-13 16:42:49

//base64 转file文件流 function base64toFile(dataurl,filename='file'){ let arr = dataurl.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split('/')[1]; let bstr = atob(arr[1]);...

//base64 转file文件流
function 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);
    }
    return new File([u8arr], `${filename}.${suffix}`, {
       type: mime
    });
  }

base64 转二进制
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

收起

展开全文

javascript

前端 base64转二进制流（blob）
千次阅读 2022-05-07 13:54:45

前端 base64转二进制流（blob）

收起

javascript vue.js
Base64转二进制流以及blob文件
千次阅读 2020-11-10 10:47:25

Base64转二进制流以及blob文件 1.Base64转文件格式大小（带有前缀的截取，比如data:application/pdf;base64,JVE。。。） function base64toBlob(dataurl, filename) { ////将base64转换为文件 var arr = dataurl....

收起

javascript
base64格式转为二进制流
千次阅读 2021-11-26 09:21:03

dataURItoBlob(base64Data) { console.log(base64Data, '????') // data:image/png;base64, var byteString if (base64Data.split(',')[0].indexOf('base64') >= 0) byteString = atob(base64Data.split(',')...

收起

javascript es6
Python使用base64模块进行二进制数据编码详解
2020-09-20 21:38:28

主要介绍了Python使用base64模块进行二进制数据编码详解，具有一定借鉴价值,需要的朋友可以参考下

收起
js 显示base64编码的二进制流网页图片
2020-10-26 02:10:23

base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求

收起
java中base64转二进制流
2022-08-17 18:11:57

2、base64转二进制流 --进而生成图片。1、图片转base64。

收起

hdfs ecmascript jvm
js中文件、图片二进制和base64的互转
2022-07-30 09:58:16

js中文件、图片二进制和base64的互转

收起

javascript 开发语言
base64图片压缩并转换二进制流
2021-07-28 17:42:23

base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, ...

收起

base64 压缩 javascript react.js
Java文件和Base64、二进制（byte[]）互转
千次阅读 2022-01-10 21:58:15

java实现文件和base64互转和二进制互转

收起

java base64 二进制文件
前端上传图片 base64转二进制上传
千次阅读 2018-07-19 19:49:00

base64," + that. imgEditerPlugin. encodeBase64()); fd. append( "file", blob, fname); $. ajax({ contentType: false, cache: false, url: uploadUrl, type: "POST", processData: false, data: fd })....

收起
iOS 图片上传使用base64或者二进制流上传头像功能
2021-01-04 05:13:42

另一种方式是使用二进制流进行上传图片，这种方式上传图片少或者数量多都没关系，速度也很快 demo地址：http://download.csdn.net/detail/tuwanli125/9340205 demo地址: https://github.com/tuwanli/PictureHead ...

收起
base64图片转二进制 文件
2020-06-11 17:04:07

//请求的域名 ...export function dataURLtoFile(dataurl, filename) { //将base64转换为文件 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.lengt...

收起
js base64转二进制
千次阅读 2018-05-20 21:34:00

转换前 11111101, 11111111, 11111111 （二进制）转换后 00111111, 00011111, 00111111, 00111111 （二进制，因为base64只需要6位就能满足，但是一个字节是8位，所以多出来2个没用的0）要转回2进制，就需...

收起
Base64 与二进制流文件互转
千次阅读 2020-04-22 19:07:18

文件转 Base64 FileInputStream fileInputStream = new FileInputStream(file); byte b[]=new byte[fileInputStream.available()]; fileInputStream.read(b); String str = new String(Base64.getEncoder().encode(b...

收起

java
uniapp jquery base64转blob二进制文件流、方法【强推】
千次阅读 2021-06-29 10:25:56

一、base64转blob二进制文件流 blob二进制文件流格式：blob: 开头的地址 parseBlob:function(base64) { var arr = base64.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n ...

收起
文件与base64二进制转换
2021-05-24 02:30:38

/// /// 文件转换为Base64二进制流/// /// /// public static string FileToBase64(string FilePath){FileStream fileStream = File.Open(FilePath, FileMode.OpenOrCreate);byte[] buffer = new byte[fileStream....

收起
base64图片转二进制及图片上传
千次阅读 2019-10-07 15:49:40

*将base64转换为file // common.js ...export function dataURLtoFile(dataurl, filename) { //将base64转换为文件 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob...

收起
vue+axios展示二进制文件流图片
2021-01-20 08:41:15

1、请求方式 axios({ url: ‘请求地址’, responseType: ‘arraybuffer’, method: ‘get/post’, params: { …data } }) 2、展示方式两种展示方式任意选择 1、const url = URL.createObjectURL(new Blob([res]...

收起
文件转二进制文件流
千次阅读 2021-07-13 16:54:28

// 将文件转为二进制 export function fileParse(file, type) { const caseType = { 'base64': 'readAsDataURL', 'buffer': 'readAsArrayBuffer' } const fileRead = new FileReader() return new Promise...

收起
二进制转base64
千次阅读 2020-01-19 13:56:52

有时候需要将二进制图片文件 转base64，方法如下： _arrayBufferToBase64(buffer) { let binary = ""; let bytes = new Uint8Array(buffer); let len = bytes.byteLength; for (let i = 0; i < len; i++)...

收起

二进制转base64
前台接收后台传过来的二进制文件流（二进制转为base64）
千次阅读 2019-08-12 09:13:44

因为ajax不能接受文件流，所以使用原生的请求方式，接收后台传过来的二进制文件流 　var xhr = new XMLHttpRequest(); 　xhr.open('GET', '/path/to/image.png'); 　xhr.responseType = "arraybuffer"; 　request....

收起

二进制转base64
Base64文件流、文件二进制字符串转文件
2022-03-01 18:20:28

Base64文件流、文件二进制流字符串转文件并保存本地-----相关方法 package com.lingxu.module.picture.util; import org.apache.commons.lang.ArrayUtils; import java.io.*; import java.util.Base64; import ...

收起

java 开发语言后端
文件流互相转换（blob转base64,二进制流）
2022-07-21 10:27:29

文件流转换

收起

javascript html
如何在Python中将base64文件解码为二进制文件？
2021-07-16 13:01:56

I'm building a system which handles pdf file data (for which I use the PyPDF2 ... I now obtain a base64 encoded PDF which I can decode and store correctly using the following:import base64# base64Fi...

收起

现在的项目中对于图片的处理很多，对于图片的URL转Base64或者Base64转文件流很是不好处理，下面我总结了这两种方法互转的代码，希望对你有所帮助。

图片URL 转Base64