在线图片转Base 64

万达二哥

于 2020-09-15 16:18:18 发布

阅读量245

点赞数

分类专栏： javaScript 文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_38599724/article/details/108600205

版权

javaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API中的HTMLCanvasElement.toDataURL()方法将图片转换为DataURL字符串。通过创建一个HTML canvas元素，设置其宽度和高度与图片相同，然后使用getContext('2d')获取2D渲染上下文，最后调用drawImage()方法绘制图片到canvas上，再调用toDataURL()方法将canvas内容转换为DataURL。示例代码展示了整个过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：

https://developer.mozilla.org/zhCN/docs/Web/API/HTMLCanvasElement/toDataURL

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var img = "https://bkimg.cdn.bcebos.com/pic/6c224f4a20a446230ff0bec39f22720e0cf3d75c?x-bce-process=image/resize,m_lfit,w_790,limit_1";
			var image = new Image();
			image.crossOrigin = "anonymous" // 不加导致 canvas.toDataURL("image/jpeg");报错
			image.src = img;
			image.onload = function() {
				var canvas = document.createElement("canvas");
				canvas.width = image.width;
				canvas.height = image.height;
				var ctx = canvas.getContext("2d");
				ctx.drawImage(image, 0, 0, image.width, image.height);
				var dataURL = canvas.toDataURL("image/jpeg");
				console.log(dataURL);
			}
		</script>
	</body>
</html>