MDN之Web API 接口参考(六)【 HTMLCanvasElement.toBlob()】

深碍√TFBOYSˉ_ 2021-06-26 16:06 460阅读 0赞

`HTMLCanvasElement.toBlob()` 方法创造`Blob`对象，用以展示`canvas`上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 `image/png`，分辨率为`96dpi`。

第三个参数用于针对`image/jpeg`格式的图片进行输出图片的质量设置。

## 语法 ##

void canvas.toBlob(callback, type, encoderOptions);

### 参数 ###

callback

回调函数，可获得一个单独的Blob对象参数。

type 可选

`DOMString`类型，指定图片格式，默认格式为`image/png`。

encoderOptions 可选

`Number`类型，值在0与1之间，当请求图片格式为`image/jpeg`或者`image/webp`时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。

### 返回值 ###

无。

## 示例 ##

### 将`canvas`图像转换为文件 ###

当一个内容画到`canvas`上时，我们可以将它生成任何一个格式支持的图片文件。比如，下面的代码段获得了id为“`canvas`”的`<canvas>`元素中的图像，复制成一个`PNG`图，在文档中加入一个新的`<img>`元素，这个`<img>`元素的源图就是使用`canvas`创建的那个图像。

var canvas = document.getElementById("canvas");
    
    canvas.toBlob(function(blob) { 
      var newImg = document.createElement("img"),
          url = URL.createObjectURL(blob);
    
      newImg.onload = function() { 
        // no longer need to read the blob so it's revoked
        URL.revokeObjectURL(url);
      };
    
      newImg.src = url;
      document.body.appendChild(newImg);
    });

注意，我们这里创建的是`PNG`图片；如果在`toBlob()`传入第二个参数，就可以指定图片格式。例如，生成`JPEG`格式的图片：

canvas.toBlob(function(blob){ ...}, "image/jpeg", 0.95); // JPEG at 95% quality

### 将`canvas`转换为`ico`（仅限`Mozilla`） ###

使用`-moz-parse`来将`canvas`转换为`ico`。Windows XP不支持将`PNG`转为`ico`，因此转为`bmp`作为代替。设置下载属性，生成下载链接。下载属性的值将被用来作为文件名。

### Save `toBlob` to disk with `OS.File` (chrome/add-on context only ###

此技术将其保存到桌面，仅在Firefox chrome上下文或附加代码中有用，因为Web站点上不存在`OS API`。

## Polyfill ##

基于`toDataURL`的低性能`polyfill`

if (!HTMLCanvasElement.prototype.toBlob) { 
     Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { 
      value: function (callback, type, quality) { 
    
        var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
            len = binStr.length,
            arr = new Uint8Array(len);
    
        for (var i=0; i<len; i++ ) { 
         arr[i] = binStr.charCodeAt(i);
        }
    
        callback( new Blob( [arr], { type: type || 'image/png'} ) );
      }
     });
    }