精华内容
下载资源
问答
  • 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转成你的二进制文件流了!

    更多相关内容
  • 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>
    
    展开全文
  • 前端纯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格式图片转换成二进制流并生成图片文件(阅读量1.2w) /** * 图片转换为base64格式 * * @param bitmap 位图 * @return */ @TargetApi(Build.VERSION_CODES.O) public static String bitmapToBase64...
  • //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 });
    }
    
    展开全文
  • 前端 base64转二进制流(blob)

    千次阅读 2022-05-07 13:54:45
    前端 base64转二进制流(blob)
  • 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....
  • 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(',')...
  • 主要介绍了Python使用base64模块进行二进制数据编码详解,具有一定借鉴价值,需要的朋友可以参考下
  • base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求
  • java中base64转二进制流

    2022-08-17 18:11:57
    2、base64转二进制流 --进而生成图片。1、图片转base64。
  • js中 文件、图片二进制base64的互
  • base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, ...
  • 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 })....
  • 另一种方式是使用二进制流进行上传图片,这种方式上传图片少或者数量多都没关系,速度也很快 demo地址:http://download.csdn.net/detail/tuwanli125/9340205 demo地址: https://github.com/tuwanli/PictureHead ...
  • //请求的域名 ...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...
  • 一、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二进制流/// /// /// 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...
  • 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++)...
  • 因为ajax不能接受文件流,所以使用原生的请求方式,接收后台传过来的二进制文件流  var xhr = new XMLHttpRequest();  xhr.open('GET', '/path/to/image.png');  xhr.responseType = "arraybuffer";  request....
  • Base64文件流、文件二进制流字符串文件并保存本地-----相关方法 package com.lingxu.module.picture.util; import org.apache.commons.lang.ArrayUtils; import java.io.*; import java.util.Base64; import ...
  • 文件流转换
  • 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...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,102
精华内容 21,240
关键字:

base64转二进制文件流