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>
栏目列表