JavaScript Canvas 转 Blob


概述


Canvas-to-Blob 库是一个 polyfill,其为那些不支持标准 js HTMLCanvasElement.toBlob 方法的浏览器提供了一个替代方案。

它能够通过一个 HTML canvas 元素创建 Blob 对象。

安装


通过 NPM 安装:

$ npm install blueimp-canvas-to-blob

上述步骤会将库脚步文件安装到你当前目录下的 ./node_modules/blueimp-canvas-to-blob/js/ 中,然后你可以将它们拷贝到你 web 应用中合适的目录下。

接下来请在你的 HTML 引用压缩版的 canvas-to-blob 脚本:

<script src="js/canvas-to-blob.min.js"></script>

又或者引用一个非压缩版的:

<script src="js/canvas-to-blob.js"></script>

使用指南


和原生方法一样,你可以用相同的方式调用 canvas.toBlob() 方法:

var canvas = document.createElement('canvas')
// Edit the canvas ...
if (canvas.toBlob) {
  canvas.toBlob(function (blob) {
    // Do something with the blob object,
    // e.g. create multipart form data for file uploads:
    var formData = new FormData()
    formData.append('file', blob, 'image.jpg')
    // ...
  }, 'image/jpeg')
}

依赖性


JavaScript-Canvas-to-Blob 插件库具备零依赖性。

而且,它是一个非常适合 JavaScript Load Image 插件使用的扩展库。

浏览器支持


以下浏览器支持原生的 HTMLCanvasElement.toBlob

  • Chrome 50+
  • Firefox 19+
  • Safari 11+
  • Mobile Chrome 50+ (Android)
  • Mobile Firefox 4+ (Android)
  • Mobile Safari 11+ (iOS)
  • Edge 79+

除此之外,实现了下列接口的浏览器则能够支持本插件的 canvas.toBlob()

其中,下面浏览器满足这些条件:

  • Chrome 20+
  • Firefox 13+
  • Safari 8+
  • Mobile Chrome 25+ (Android)
  • Mobile Firefox 14+ (Android)
  • Mobile Safari 8+ (iOS)
  • Edge 74+
  • Edge Legacy 12+
  • Internet Explorer 10+

API


此外,除了 canvas.toBlob() polyfill,本插件脚本中还提供了一个辅助函数 dataURLtoBlob(url)

// Uncomment the following line when using a module loader like webpack:
// var dataURLtoBlob = require('blueimp-canvas-to-blob')

// black+white 3x2 GIF, base64 data:
var b64 = 'R0lGODdhAwACAPEAAAAAAP///yZFySZFySH5BAEAAAIALAAAAAADAAIAAAIDRAJZADs='
var url = 'data:image/gif;base64,' + b64
var blob = dataURLtoBlob(url)

测试


单元测试