JavaScript将canvas生成的图片保存到本地

六月初六月初 JavaScipt 2023-04-04 10:19:01

网站开发中常使用canvas的特性动态实时生成样式不一的图片展示给用户，而对于用户来说需要将这些定制生成的图片下载到本地要如何操作呢？

本文基于canvas的图片下载给出详细代码。

代码之前，先来了解下canvas的toDataURL()，这也是canvas图片下载的关键。

toDataURL()定义：

    返回一个包含图片展示的 数据URL

toDataURL()语法

    canvas.toDataURL(type, encoderOptions);

    type：图片格式，默认为 image/png,可以是其他image/jpeg等

    encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。

示例完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="200" height="200"></canvas>
		<button onclick="donwn">下载</button>
		<script type="text/javascript">
			var cvs = document.getElementById('mycanvas'),
				ctx = cvs.getContext('2d');
			ctx.fillStyle = "yellow";
			ctx.fillRect(0, 0, 300, 400);
			function donwn(){
				downImage(ctx,'自定义下载文件名')
			}
			function downImage(canvas,name) {
				var a = document.createElement("a");
				a.href = canvas.toDataURL();
				a.download = name;
				a.click();
			}
		</script>
	</body>
</html>

示例解析：

    downImage方法参数说明：canvas即需要下载的canvas区域、name即下载后文件名

    关于toDataURL的参数说明，该参数可不填写，默认为image/png和0.92

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！