README

描述

Canvas to Blob 是标准 JavaScript canvas.toBlob 方法的 polyfill。

安装

npm i -S blueimp-canvas-to-blob

它可以用来从 HTML canvas 元素中创建 Blob 对象。

使用方法

将 (压缩的) JavaScript Canvas to Blob 脚本包含到您的 HTML 标记中

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

然后像原生实现一样使用 canvas.toBlob() 方法

var canvas = document.createElement('canvas'); 
/* ... your canvas manipulations ... */
if (canvas.toBlob) {
    canvas.toBlob(
        function (blob) {
            // Do something with the blob object,
            // e.g. creating a multipart form for file uploads:
            var formData = new FormData();
            formData.append('file', blob, fileName);
            /* ... */
        },
        'image/jpeg'
    );
}

要求

JavaScript Canvas to Blob 函数没有依赖。

然而，Canvas to Blob 是 JavaScript Load Image 函数的一个很好的补充。

API

除了 canvas.toBlob polyfill 之外，JavaScript Canvas to Blob 脚本还提供了一个名为 dataURLtoBlob 的额外函数，如果未使用 AMD 加载器来加载脚本，则将其添加到全局 window 对象中

// 80x60px GIF image (color black, base64 data):
var b64Data = 'R0lGODdhUAA8AIABAAAAAP///ywAAAAAUAA8AAACS4SPqcvtD6' +
        'OctNqLs968+w+G4kiW5omm6sq27gvH8kzX9o3n+s73/g8MCofE' +
        'ovGITCqXzKbzCY1Kp9Sq9YrNarfcrvcLDovH5PKsAAA7',
    imageUrl = 'data:image/gif;base64,' + b64Data,
    blob = window.dataURLtoBlob && window.dataURLtoBlob(imageUrl);

浏览器

以下浏览器支持原生或 polyfill 的 canvas.toBlob() 方法

桌面浏览器

• Google Chrome (见 Chromium 问题 #67587)
• Apple Safari 6.0+ (见 Mozilla 问题 #648610)
• Mozilla Firefox 4.0+
• Microsoft Internet Explorer 10.0+

移动浏览器

• Apple Safari Mobile 在 iOS 6.0+ 上
• Google Chrome 在 iOS 6.0+ 上
• Google Chrome 在 Android 4.0+ 上

测试

JavaScript Canvas to Blob 测试

许可

JavaScript Canvas to Blob 脚本在 MIT 许可证 下发布。