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

梦里梦外; 2022-01-23 11:41 355阅读 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”)元素

可以用这样的方式获取一个 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
点击下载能够完成Canvas图片的下载.

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220123/5b76cacabe2c4769931b46b71707e97c.png