赞
踩
1.获取canvas元素。我们可以使用JavaScript的document.getElementById()或document.querySelector()方法来获取canvas元素。
2.获取canvas的绘图上下文。我们可以使用canvas.getContext()方法获取canvas的绘图上下文。
3.使用toDataURL()方法将canvas内容转换为图片的base64编码。该方法接受一个参数,用于指定输出图片的格式。例如,toDataURL(‘image/png’)将输出PNG格式的图片数据。
4.创建一个img元素,并将其src属性设置为步骤3中获取到的base64编码。
5.创建一个a元素,并将其href属性设置为步骤3中获取到的base64编码。同时,将其download属性设置为所需的图片文件名。
6.将a元素添加到DOM中,并模拟点击a元素,以触发文件下载。
代码如下(示例):
// 获取canvas元素 var canvas = document.getElementById('myCanvas'); // 获取canvas的绘图上下文 var ctx = canvas.getContext('2d'); // 绘制内容 //ctx.fillRect(0, 0, 100, 100); // 将canvas内容转换为图片的base64编码 var dataURL = canvas.toDataURL('image/png'); // 创建img元素,用于预览图片 var img = document.createElement('img'); img.src = dataURL; document.body.appendChild(img); // 创建a元素,用于下载图片 var link = document.createElement('a'); link.href = dataURL; link.download = 'myImage.png'; // 添加a元素到DOM中,并触发点击事件以下载图片 document.body.appendChild(link); link.click();
以上代码将canvas绘制的矩形转换为PNG格式的图片,并将其以base64编码的形式保存在变量dataURL中。然后,代码创建了一个img元素,用于预览图片,以及一个a元素,用于下载图片。最后,代码将a元素添加到DOM中,并触发其点击事件,以下载图片到本地。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。