【基础知识】HTML5 Canvas API的toBlob()的使用（代码示例）

最新推荐文章于 2024-05-09 09:54:48 发布

苏一恒

最新推荐文章于 2024-05-09 09:54:48 发布

阅读量1w

点赞数 2

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签： canvas toBLob BLOB canvas转化文件 png

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/99674215

版权

Canvas系列教程(从入门到精通)【详细解读】专栏收录该内容

59 篇文章 105 订阅

订阅专栏

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

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

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

语法

canvas.toBlob(callback, type, encoderOptions);

参数

callback

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

type 可选

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

encoderOptions 可选

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

返回值

无。

异常

SecurityError

canvas“被污染”的情况下不能使用此方法

示例：将canvas图像转化为文件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas对象的toBlob方法示例</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
    //获取canvas元素
    var canvas = document.getElementById("canvas");

    //第一个参数是回调函数
    canvas.toBlob(
        //传入blob对象
        function (blob) {
            //创建一个img标签
            var newImg = document.createElement("img"),
                //以blob对象为基础创建一个url
                url = URL.createObjectURL(blob);
            
                console.log(url);
                //blob:http://localhost:63342/d869ed9c-cad0-49f9-9965-e9959a15e0c0
                console.log(blob);
                //返回一个BLOB对象
            
            //加载后销毁
            newImg.onload = function () {
                // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
            };

            //img标签属性赋值
            newImg.src = url;
            //添加为子元素
            document.body.appendChild(newImg);
        });
</script>
</html>

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

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

苏一恒

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
【基础知识】HTML5 Canvas API的toBlob()的使用（代码示例）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。教程介绍、教程目录等能在README里查阅。传送门：https://github.com/827652549/CanvasStudyHTMLCanvasElement.toBlob()方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保...
复制链接

扫一扫