node.js 图片转base64，到前端原生展示

最新推荐文章于 2024-03-16 05:15:00 发布

C先生20190721

最新推荐文章于 2024-03-16 05:15:00 发布

阅读量194

点赞数

文章标签：前端 ajax javascript node.js

本文链接：https://blog.csdn.net/czxvzxzczcc/article/details/122477951

版权

初始化项目 cmd 执行 npm init -y
创建README.md
安装依赖 cnpm install express --save
接下来创建app.js
开启服务
创建router.js

在后端设置跨域

// 设置跨域
router.all('*', function(req, res, next) {
	res.header("Access-Control-Allow-Origin", "*");
	res.header("Access-Control-Allow-Headers", "X-Requested-With");
	res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
	res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
	res.header("X-Powered-By",' 3.2.1')
	res.header("Content-Type", "application/json;charset=utf-8");
	next();
});

设置图片转base64，传到前端

var http = require('https');
router.get('/api-a',function(req,res){
var webUrl = [
	'https://desk-fd.zol-img.com.cn/t_s1280x1024c5/g5/M00/01/0E/ChMkJ1bKwf2IatSoAALNor2rRq4AALGhAG_TloAAs26368.jpg',
	'https://desk-fd.zol-img.com.cn/t_s1280x1024c5/g5/M00/01/0E/ChMkJlbKwf2IQr7LAAKWzU451S4AALGhAHCHBQAApbl727.jpg',
	'https://desk-fd.zol-img.com.cn/t_s1280x1024c5/g5/M00/01/0E/ChMkJlbKwf2IZpUWAALW1amR55oAALGhAHEsvkAAtbt162.jpg',
	'https://desk-fd.zol-img.com.cn/t_s1280x1024c5/g5/M00/01/0E/ChMkJlbKwf2IbXRwAALUCuLki1AAALGhAHHieYAAtQi595.jpg',
	'https://desk-fd.zol-img.com.cn/t_s1280x1024c5/g5/M00/01/0E/ChMkJ1bKwf2IS3dnAAK8R88IAIAAALGhAHKXggAArxf630.jpg'
]
	var arr_a = []
	for(var i = 0; i < webUrl.length; i++) {
		http.get(webUrl[i], function(qqq) {
			var chunks = [];var size = 0;
			qqq.on('data', function(chunk) {
				chunks.push(chunk);size += chunk.length;
			});
			qqq.on('end', function(err) {
				var data = Buffer.concat(chunks, size);
				var base64Img = data.toString('base64');
				base64Img = 'data:image/png;base64,' + base64Img + '13822942714';
				arr_a.push(base64Img);
			});
		});
	}
	// console.log(arr_a)
	setTimeout(function(){
		console.log(arr_a);
		arr_a = arr_a.toString()
		res.send(arr_a)
	}, 1000);
});

创建 index.html，编写script完成

<script>
			function getPic01() {
				var xmlhttp;
				if (window.XMLHttpRequest) {
					// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						console.log(xmlhttp.responseText)
						var arr01 = xmlhttp.responseText.split("13822942714,");
						console.log(arr01.length)
						for(var i = 0; i < arr01.length; i++){
							console.log(i)
							console.log(arr01[i])
							var img = document.createElement("img");
							document.getElementById("div01").appendChild(img);
							document.getElementsByTagName('img')[i].setAttribute('src', arr01[i])
							document.getElementsByTagName('img')[i].setAttribute('width', '128px')
							document.getElementsByTagName('img')[i].setAttribute('height', '102px')
						}
					}
				}
				xmlhttp.open("GET","http://127.0.0.1:3000/api-a",true);
				xmlhttp.send();
			}
		</script>

展示完成