如何将图片路径转化成base64格式

最新推荐文章于 2024-12-23 10:57:03 发布

原创最新推荐文章于 2024-12-23 10:57:03 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一种将本地图片转换为Base64编码的方法，通过使用HTML5的Canvas元素和toDataURL方法实现图片的编码转换，适用于前端开发中图片上传预览等场景。

function image(imgurl ) {   //imgurl   本地图片路径  
	var img = imgurl ;
	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);
		return dataURL;
	}

	var image = new Image();
	image.src = img;
	image.onload = function() {
		var base64 = getBase64Image(image);    //转换之后的图片路径
	}
}