h5 Canvas转换为图片格式并下载-蒲公英云

h5 Canvas转换为图片格式并下载

梦里梦外; 2022-01-23 11:41 457阅读 0赞

在平常工作中,我们经常会遇到通过Canvas进行展示内容的情况,在展示之后还会要求将Canvas进行已图片格式进行保存.该如何完成这一需求?
通常情况下,我们需要完成两个步骤:

1.Canvas转化为DOMString形式的String
2.将图片下载到本地

一.转化格式

1.HTMLCanvasElement.toDataURL()

使用 HTMLCanvasElement.toDataURL()进行处理数据,该方法返回一个包含图片展示的 data URI 。也就是我们常说的base64编码字符串,可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

2.注意点⚠️

如果画布的高度或宽度是0，那么会返回字符串“data:,”。
如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么说明该传入的类型是不支持的。
Chrome支持“image/webp”类型。

3.语法

canvas.toDataURL(type, encoderOptions);

参数

type 图片格式，默认为 image/png
encoderOptions 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值

包含 data URI 的字符串。

示例

有如下HTMLElement(“canvas”)元素

<canvas id="canvas" width="50" height="50"></canvas>

可以用这样的方式获取一个 data-URL

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

配合参数选项可以进行如下使用,设置jpegs图片的质量

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
var lowQuality = canvas.toDataURL("image/jpeg", 0.1);

二.下载图片

对于图片下载,我们通过创建一个隐藏的a标签的形式进行下载,通过模拟点击事件的形式进行触发.

// 设置下载并转换
      const download = document.getElementById('download');
      download.onclick = function () {
        var bloburl = canvas.toDataURL();
        console.log('bloburl', bloburl);
        var anchor = document.createElement('a');
        if ('download' in anchor) {
          anchor.style.visibility = 'hidden';
          anchor.href = bloburl;
          anchor.download = name;
          document.body.appendChild(anchor);
          var evt = document.createEvent('MouseEvents');
          evt.initEvent('click', true, true);
          anchor.dispatchEvent(evt);
          document.body.removeChild(anchor);
        } else {
          location.href = bloburl;
        }
      }

当下载完成之后,将a标签节点从dom中移除掉,完整代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas转图片并下载</title>
</head>
<body>
<canvas id="canvasId" width="500" height="500" >您的浏览器不支持使用该标签</canvas>
<button id="download">下载图片</button>
</body>
<script>
    window.onload = function () {
      // 设置canvas
      const canvas = document.getElementById('canvasId');
      const context = canvas.getContext('2d');
      context.fillStyle = '#999';
      context.font = '18px Palatino';
      context.lineWidth = '10';
      context.fillText('我是用来下载的Canvas图片', canvas.width / 2, canvas.height / 2);
      const img = new Image();
      img.src = './bird1.png';
      img.onload = function () {
        context.drawImage(img, canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2);
      }
      // 设置下载并转换
      const download = document.getElementById('download');
      download.onclick = function () {
        var bloburl = canvas.toDataURL();
        console.log('bloburl', bloburl);
        var anchor = document.createElement('a');
        if ('download' in anchor) {
          anchor.style.visibility = 'hidden';
          anchor.href = bloburl;
          anchor.download = name;
          document.body.appendChild(anchor);
          var evt = document.createEvent('MouseEvents');
          evt.initEvent('click', true, true);
          anchor.dispatchEvent(evt);
          document.body.removeChild(anchor);
        } else {
          location.href = bloburl;
        }
      }
    }
</script>
</html>