FileReader charCodeAt atob 解析二进制数据(相互转化)

最新推荐文章于 2023-02-26 20:33:35 发布

web修理工

最新推荐文章于 2023-02-26 20:33:35 发布

阅读量594

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42374676/article/details/106535246

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

蓝牙模块=>二进制=>字符串=>解析=>字符串=>二进制=>单片机指令

采用 Number 类型的 toString() 方法的基模式，可以用不同的基输出数字，例如二进制的基是 2，八进制的基是 8，十六进制的基是 16。

基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：

parseInt() 方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由 parseInt() 方法的第二个参数指定的，所以要解析十六进制的值，需如下调用 parseInt() 方法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <button onclick="bolb()">解析二进制数据</button>
    <!-- <div id="odiv"></div> -->
    <script>
        // let xhrDiv = document.getElementById('odiv');
        // let bolb = () => {
        //     let input = document.createElement('input');
        //     input.type = 'file';
        //     input.accept = 'text/plain';
        //     input.click();
        //     input.onchange = (e) => {
        //         let files = e.target.files[0];
        //         let reader = new FileReader();
        //         reader.readAsArrayBuffer(files)
        //         // let buffer = new ArrayBuffer(files);
        //         reader.onload = (e) => {
        //             let buffer = e.target.result
        //             var dataView = new DataView(buffer);
        //             var ints = new Uint32Array(dataView.byteLength / 4);
        //             xhrDiv.style.backgroundColor = "#00FF00";
        //             xhrDiv.innerText = "Array is " + ints.length + "uints long";


        //             // var dataview = new DataView(buffer);
        //             // var ints = new Int32Array(buffer.byteLength / 4);
        //             // for (var i = 0; i < ints.length; i++) {
        //             //     ints[i] = dataview.getInt32(i * 4);
        //             // }
        //             // console.log(ints[10]);
        //         }


        //     }


        // };
        // ArrayBuffer转为字符串，参数为ArrayBuffer对象
        // function ab2str(buf) {
        //     return String.fromCharCode.apply(null, new Uint16Array(buf));
        // }

        // // 字符串转为ArrayBuffer对象，参数为字符串
        // function str2ab(str) {
        //     console.log(str.length * 2)
        //     var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
        //     console.log(buf)
        //     var bufView = new Uint16Array(buf);
        //     for (var i = 0, strLen = str.length; i < strLen; i++) {
        //         bufView[i] = str.charCodeAt(i);
        //     }
        //     return buf;
        // }
        // var buf = str2ab('你好')
        // console.log(buf)
        // var ab2str = ab2str(buf);
        // console.log(ab2str)


        //图片



        let bolb = () => {
            let input = document.createElement('input');
            input.type = 'file';
            input.accept = 'image/*';
            input.click();
            input.onchange = (e) => {
                let files = e.target.files[0];
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        var src = e.target.result;
                        var data = src.split(",")[1];
                        data = window.atob(data);
                        var ia = new Uint8Array(data.length);
                        for (var i = 0; i < data.length; i++) {
                            ia[i] = data.charCodeAt(i);
                        };
                        console.log(ia)
                        // canvas.toDataURL 返回的默认格式就是 image/png
                        var blob = new Blob([ia], { type: "image/png" });
                        console.log(blob)
                        let url = URL.createObjectURL(blob)
                        console.log(url)
                        let img = new Image();
                        img.src = url;
                        img.onload = function () {
                            document.body.appendChild(img);
                        }
                        // var fd = new FormData();
                        /*****　如果 FormData 对象中的某个字段值是一个 Blob 对象,则在发送 HTTP 请求时，代表该 Blob 对象所包含文件的文件名的 "Content-Disposition" 请求头的值在不同的浏览器下有所不同，Firefox使用了固定的字符串"blob"，而 Chrome 使用了一个随机字符串。*******/
                        // fd.append('headPhototUrl', blob);
                        // $.ajax({
                        //     data: fd,
                        //     type: "post",
                        //     dataType: "json",
                        //     processData: false,   //使得jquery不处理请求数据
                        //     contentType: false,  //使得jquery不设置content-type请求头
                        //     url: "/huahan/UploadPhoto.do",
                        //     success: function (result) {
                        //         if (result.errorCode == 0) {
                        //             $(".h_picBox .loadPic").eq(index).find("span").html("<img src='" + result.data + "' />");
                        //         } else {
                        //             ajaxError(result.errormsg);
                        //         }
                        //     }
                        // });
                    };
                })(files);
                reader.readAsDataURL(files);

            }


        }



    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
    <button onclick="blob()">二进制数据</button>
    <script>
        function blob() {
            var input = document.createElement('input');
            input.type = 'file';
            input.accept = 'text/*';
            input.click();
            input.onchange = function (e) {
                // files=e.target.files[0]
                files = this.files[0];
                // var blob = new Blob([files]);//二进制数据
                // console.log(blob)
                var reader = new FileReader();
                reader.readAsBinaryString(files);
                reader.onload = function (e) {
                    console.log(e.target.result) //二进制文件内容
                }
            }
        }
    </script>
</body>

</html>

web修理工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
FileReader charCodeAt atob 解析二进制数据(相互转化)

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫