【基础知识】HTML5 Canvas API的toDataUrl()的使用（图文、演示）

最新推荐文章于 2023-12-19 14:02:43 发布

苏一恒

最新推荐文章于 2023-12-19 14:02:43 发布

阅读量5.7k

点赞数 3

分类专栏： Canvas系列教程(从入门到精通)【详细解读】文章标签： canvas API toDataURL quality canvas转化图片

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

版权

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

59 篇文章 105 订阅

订阅专栏

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

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

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

方法介绍

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

如果画布的高度或宽度是0，那么会返回字符串“data:,”。
如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
Chrome支持“image/webp”类型。

语法

canvas.toDataURL(type, encoderOptions);

参数

type 可选

图片格式，默认为 image/png

encoderOptions 可选

在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

返回值

包含 data URL的DomString。

不含参数的简单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas对象的ToDataUrl方法示例</title>
</head>
<body>
<canvas id="canvas" width="5" height="6"></canvas>

</body>
<script>
    var canvas = document.getElementById("canvas");
    var dataUrl = canvas.toDataURL();
    console.log(dataUrl);
    //data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAD0lEQVQYV2NkwAIY6SUIAAI3AAcl6v7fAAAAAElFTkSuQmCC
    /*
    这个格式被称为Data URLs,可以直接键入浏览器url里，以默认格式png的形式展示图片
    不过由于canvas里并没有非透明元素，所以直接浏览是看不出什么的，可以用比较画面丰富的canvas元素的Data URLs来进行浏览
     */
</script>
</html>

这里的返回值Data URLs是一种前缀为data:协议的URL，其允许内容的创建者在文档中嵌入小文档。

Data URLs介绍传送门： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/data_URIs

含参数的简单示例

我们只需要在上述代码中填入参数即可

//全质量 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAGAAUDAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAAC//EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AP/B//9k=
    var fullQuality = canvas.toDataURL('image/jpeg',1);
    //半质量 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCAAGAAUDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJ+AD//Z
    var mediumQuality = canvas.toDataURL('image/jpeg',0.5);
    //低质量 data:image/webp;base64,UklGRk4AAABXRUJQVlA4WAoAAAAQAAAABAAABQAAQUxQSA8AAAABBxAREQAIwv+2iYj+hwAAVlA4IBgAAAAwAQCdASoFAAYAB0CWJaQAA3AA/u+5AAA=
    var lowQuality = canvas.toDataURL('image/webp',0.1);

这里是一个能够明显看出图片质量的demo https://827652549.github.io/Canvas/QualityTest.html