javascript基于canvas实现图片转base64数据 -六月初技术站

javascript基于canvas实现图片转base64数据

六月初 JavaScipt 2023-05-20 10:12:14

base64格式数据图片在现有网站中或多或少都能看到一部分它的影子，base64特点使它在一些特定的场景中有着不可比拟的优势。

跟随文章一起来看看base64数据的优势及如何在前端代码中实现对图片转base64数据。

一、base64数据的优势

1.1、base64格式的图片转化为字符串后，图片文件会随着html元素一并加载，占用内存小，减少请求次数从而也降低了服务器的开销。

1.2、不存在跨域问题，对于多数图片来说跨域使不可避免的麻烦。但base64文件完全没有这方面的担忧。

1.3、不存在因为图片缓存而造成未及时更新的问题。

1.4、base64的文本格式，占用内存小，转换后的大小比例大概为原来的1/3左右，从而降低了资源服务器的消耗。

二、前端使用canvas对图片转base64

2.1、完整方法代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function imgToBase64(imgSrc, imgType, callback) {
			    let type = imgType || 'image/png',
			    dataURL,
			    img = new Image();
			    // 允许资源跨域使用
			    img.setAttribute('crossOrigin', 'anonymous');
			    img.src = imgSrc;
			    img.onload = function () {
			        let imgWidth = img.width,
			        imgHeight = img.height;
			        let canvas = document.createElement('canvas'),
			        ctx = canvas.getContext('2d');
			        canvas.width = imgWidth;
			        canvas.height = imgHeight;
			        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
			        dataURL = canvas.toDataURL(type);
			        // console.log(dataURL);
			        callback && callback(dataURL)
			        return dataURL
			    }
			}
			imgToBase64('./haibg.jpg','image/jpeg',function(e){
				console.log(e)
			})
		</script>
	</body>
</html>