保存canvas图标到本地

最新推荐文章于 2025-04-19 17:31:31 发布

原创最新推荐文章于 2025-04-19 17:31:31 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #保存图片到本地

博客介绍了保存canvas图标到本地的相关内容。直接下载的图片可能背景为黑色，因默认是透明色。以饼状图项目为例，可通过配置背景颜色为白色改善，还可使用fillStyle为canvas添加填充颜色。

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

保存canvas图标到本地

this.saveImage.onclick = () => {
// 1.获取canvas元素
  const canvas = document.querySelector('canvas') 
  // 2. 参数 {type： 图片格式， encoderOptions： 图片质量} 返回包含图片展示的dataURl 格式： data:[<mediatype>][;base64],<data>
  const image = canvas.toDataURL("image/jpeg")
  // 3. 创建a标签
  var aNode = document.createElement('a');
  // 4. 添加href属性 为image
  aNode.setAttribute("href", image);
  // 5.添加download属性 下载图片
  aNode.setAttribute("download", "");
  // 6.
  aNode.click();
}