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

图片转换为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://blog.csdn.net/qq_29099209/article/details/82800496

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

https://www.jianshu.com/p/e26aaca7e201

https://segmentfault.com/q/1010000012560812/a-1020000012562058

https://www.cnblogs.com/freeliver54/p/11002194.html

https://www.cnblogs.com/wangqiideal/p/5056918.html