Loading...

返回瞬间
Administrator
Administrator
01-26 14:53

canvas转存图片文件

<!DOCTYPE html>
<html lang="zh=CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas2png</title>
</head>

<body>
  <canvas width="300" height="120"></canvas>
</body>

<script>
  const canvas = document.querySelector("canvas");
  const ctx = canvas.getContext("2d");

  // 创建渐变色，指定渐变色覆盖范围
  var lingrad = ctx.createLinearGradient(0, 0, 300, 120);
  lingrad.addColorStop(0, '#FFCCCC');
  lingrad.addColorStop(1, '#CCFFFF');
  ctx.fillStyle = lingrad;
  // 将渐变色画进canvas
  ctx.fillRect(0, 0, 300, 120);

  const dl = document.createElement("a");
  dl.download = Date.now() + '.png';
  canvas.toBlob(b => {
    dl.href = URL.createObjectURL(b);
    dl.click();
  }, 'image/png');
</script>

</html>

引用: canvas2image

0