html5笔记5 — canvas保存文件

最新推荐文章于 2024-09-06 13:16:41 发布

原创最新推荐文章于 2024-09-06 13:16:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

html5+css3 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API绘制背景并将其保存为JPEG格式的图片。通过调用toDataURL方法，可以将Canvas的内容导出为指定类型的图像数据URL。

canvas保存文件

js:

function draw(id){
  // 获取canvas的id
  var canvas = document.getElementById('canvas');
  // 取得上下文
  var context = canvas.getContext('2d');
  // 绘制背景
  context.fillStyle = "#f45da9";
  context.fillRect(0,0,500,350);
  ...

 //保存文件
 window.location = canvas.toDataURL('image/jpeg');//会输出一个jpeg的图片
}

解析：
canvas.toDataURL（type）;表示输出的MIME类型。
什么是MIME类型？ jpg、image/jpeg。