当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript—图片与base64编码互相转换

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

2019年10月16日  | 移动技术网IT编程  | 我要评论

无敌大铁人28fx,磺胺间甲氧嘧啶钠,没头脑和不高兴话剧

图片转换为base64编码

<input type = "file"  id = "file" onchange="popfilename(this)" multiple = "multiple" name="点我上传"/>
<div id="imgcontainer"></div>
<script src="c:\users\bt.cn\desktop\jquery-3.3.1.min.js"></script>
<script>
	function popfilename(that) {
		var path1 = document.getelementbyid("file").value;
		console.log(path1);                         // c:\fakepath\ddd.jpg，这不是真实路径
		var path2 = document.getelementbyid("file").files[0];
		var objurl = getobjecturl(that.files[0]);   // 这里的objurl就是input file的真实路径
		
		var image = new image();  
		image.src = objurl;  
		image.onload = function(){  
		    var base64 = getbase64image(image);  
		    console.log(base64);  
			$('#imgcontainer').html("<img src='" + objurl + "' width='"+image.width+"' height='"+image.height+"' id='target'/>");
		}  
	}
	
	// 获取上传图片文件的真实路径
	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;
	}
	
	// 得到上传图片文件的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);  
		var dataurl = canvas.todataurl("image/jpeg"); 
		return dataurl;  
	}  
</script>

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>

 

https://blog.csdn.net/cgs_______/article/details/74078411

https://www.cnblogs.com/mainactivity/p/8550895.html

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网