欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-18 19:50:58
图片转换为base64编码 base64编码转换为图片 https://blog.csdn.net/CGS_______/article/details/74078411 https://blog.csdn.net/qq_29099209/article/details/82800496 https ......

图片转换为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