JavaScript—图片与base64编码互相转换(2)

当前位置:
首页 > temp > JavaScript教程 >

JavaScript—图片与base64编码互相转换(2)
base64编码转换为图片
<div id="imgContainer"></div>

<textarea type="text" id="s1" rows="100" cols="100"></textarea>

<div onclick="work()" id ="d1">base64编码转成图片</div>

<script src="C:\Users\bt.cn\Desktop\jquery-3.3.1.min.js"></script>

<script>

    // 将base64转换为文件

    function dataURLtoFile(dataurl, filename) {     

        var arr = dataurl.split(',');

        var mime = arr[0].match(/:(.*?);/)[1];

        var bytes = window.atob(arr[1]);            // 去掉url的头，并转化为byte

        //let n = new ArrayBuffer(bytes.length);    // 处理异常,将ascii码小于0的转换为大于0

        var n = bytes.length,

        u8arr = new Uint8Array(n);                  // 生成视图（直接针对内存）：8位无符号整数，长度1个字节

        while(n--){

            u8arr[n] = bytes.charCodeAt(n);

        }

        // for (let i = 0; i < bytes.length; i++) {

        //     u8arr[i] = bytes.charCodeAt(i);

        // }

        // return new Blob([u8arr], {type: mime});

        console.log(u8arr,"==>",[u8arr])

        return new File([u8arr], filename, {type:mime});

    }

    // 获取上传图片文件的真实路径

    function getObjectURL(file) {

        var url = null;

        if (window.createObjcectURL != undefined) {

            url = window.createOjcectURL(file);

        } else if (window.URL != undefined) {

            url = window.URL.createObjectURL(file);

        } else if (window.webkitURL != undefined) {

            url = window.webkitURL.createObjectURL(file);

        }

        return url;

    }

    function work() {

        var base64 = document.getElementById("s1").value;

        var myFile = dataURLtoFile(base64,'testimg');

        var imgURL = getObjectURL(myFile);

        $('#imgContainer').html("<img src='" + imgURL + "' />");

        // var image = new Image(); 

        // image.src = imgURL; 

        // image.onload = function(){  

        //     $('#imgContainer').html("<img src='" + imgURL + "' width='"+image.width+"' height='"+image.height+"' id='target'/>");

        // } 

    }

</script>
栏目列表