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

苏一恒

7059人浏览 · 2019-08-16 10:26:04

苏一恒 · 2019-08-16 10:26:04 发布

我的处女作《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

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，