我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
方法介绍
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