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

最新推荐文章于 2024-05-16 11:12:50 发布
最新推荐文章于 2024-05-16 11:12:50 发布
阅读量5.3k 收藏 5
点赞数 3
分类专栏： Canvas系列教程(从入门到精通)【详细解读】 文章标签： canvas API toDataURL quality canvas转化图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/99671708
版权

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

苏一恒
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
canvas学习——toDataURL()方法
xm2by的博客
09-12 5万+
toDataURL()方法 1、toDataURL()方法是什么？ toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码； 2、利用canvas的toDataURL()方法如何将图片转换为base64编码？ 通过将图片绘制到canvas中，然后将canvas对象转换为base64编码，从而实现图片转为base64编码； 3、将图片转换为bas...
JavaScript 的 canvas.toDataURL 详解
subsistent的博客
09-23 4777
元素以及保存的图像质量要求，生成的数据 URL 可能会较长。在某些情况下，这可能会导致性能问题或网络传输的限制。在这种情况下，可以考虑使用其他方法，如将图像数据上传到服务器进行处理。元素的内容转换为数据 URL 的方法。它返回一个包含图像表示的字符串，可以作为图片的源值使用。返回一个字符串，其中包含了一个基于指定类型的图像表达的数据 URL。需要注意的是，由于数据 URL 包含了完整的图像数据，因此对于较大的。的字符串，表示一个 PNG 格式的图片数据 URL。是 JavaScript 中用于将。
【前端】利用canvas实现图片压缩（附demo源码）
最新发布
qq_2511276124的博客
05-16 563
有的时候会遇到图片压缩的场景，我们可以使用canvas重新绘制图片，然后利用canvas的toDataURL()API导出base64数据实现图片压缩。
canvas的toDataURL()方法
热门推荐
first_shun的博客
06-14 6万+
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为PNG格式。图片的分辨率为96dpi。 一、语法 canvas.toDataURL(type, encoderOptions); 二、参数 1、type：图片格式，默认为 image/png,可以是其他image/jpeg等 2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。 三、返回值 返回值是一个数据u...
今日学习知识点-canvas的toDataURL()方法
Wsyzzzn的博客
12-19 1708
首先复习一下base64位编码，有时我们会先将图片转化为base64格式的情况，这样的好处是减少一张图片的http请求，但是相应的缺点就是转换之后会导致css文件体积增大，而css的体积会影响页面渲染，因此会导致白屏时间长。注：如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。用于设置转换为base64编码后图片的质量，取值范围为0-1，超出取值范围用默认值0.92代替；对象的一种方法，用于将canvas对象转换为base64位编码；
基于画布canvas进行图片压缩
weixin_43850458的博客
05-11 1395
JavaScript图片压缩
base64压缩/canvas.toDataURL
song854601134的博客
01-11 2309
在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。“jpg和jpeg没有区别，是缩写的程度不同。jpeg文件扩展名应该为.jpeg，dos 时代的8.3文件规定扩展名不能超过3个字符，就使用了.jpg。如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。, 支持的是"image/jepg"，encoderOptions 可选。
前端canvas能压缩图片？
秋来九月八
05-18 1456
获取input type=file的文件 将其转为base64 赋值给img 的src 将整个img交给canvas重绘， 通过canvas的toDataURL方法重新转为base64， 将base64赋值给img的src 通过上面的方式真的能压缩图片么？ 先看一下vue的测试代码 <template> <form action="/upload" enctype="multipart/form-data" method="post"> <input ty.
程序设计HTML5 Canvas API
09-28
HTML5 Canvas API是Web开发中用于在网页上绘制图形的一项技术。通过JavaScript，开发者可以直接在浏览器内进行2D图形绘制，实现动态、交互式的视觉效果。以下是对Canvas API的详细说明： 1. **Canvas元素创建**： ...
HTML5 Canvas阴影使用方法实例演示
09-28
HTML5 Canvas中提供了设置阴影的四个属性值可以实现阴影文字、3D拉影效果、边缘模糊效果文字，具体的演示代码如下，想学习的朋友可以参考下
HTML5 Canvas API中drawImage()方法的使用实例
09-28
主要介绍了HTML5 Canvas API中drawImage()方法的使用实例,drawImage()方法主要用来对图像进行缩放或裁剪,文中给出了其坐标及相关参数的用法,需要的朋友可以参考下
将HTML5 Canvas的内容保存为图片借助toDataURL实现
09-28
`toDataURL()` 方法是Canvas API的一部分，它能够将Canvas画布上的内容转换成一个数据URL，这个URL实际上是一个包含图像数据的Base64编码字符串，可以直接在浏览器中作为图像显示。 以下是对`toDataURL()`方法的...
HTML 5 Canvas基础教程 源码+PDF
02-25
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
08-28
在IE11浏览器中，使用`canvas.toDataURL`方法可能会遇到`SecurityError`的问题，这是因为IE11在处理跨域图像时的安全策略比其他现代浏览器更为严格。在尝试获取canvas对象上的数据URL时，如果canvas上绘制了来自不...
HTML5Canvas基础教程
07-22
资源名称：HTML5 Canvas基础教程内容简介：《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复...
canvas.toDataURL image/png 报错处理方法推荐
09-28
其中，`canvas.toDataURL()` 方法是将 `canvas` 上的内容转换为一个数据 URL，通常用于保存或分享画布上的图像。然而，在某些情况下，调用这个方法可能会遇到“安全错误”（SecurityError），提示“Tainted canvases...
前端 canvas toDataURL() 转图片生成空白图片问题
disanxiaoyao的博客
05-16 8041
地图map canvas 转 图片 空白图片
h5 Canvas转换为图片格式并下载
suwu150
06-05 7619
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。 如果画布的高度或宽度是0，那么会返回字符串“data:,”。 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型...
js canvas拼图及压缩
hbjiankely的博客
08-25 309
使用canvas拼图 将多张图片绘制在canvas上 图片尺寸: 1920 * 1080 拼4张图 canvas: width = 1920 * 4 height = 1080 <canvas id="myCanvas" width="7680" height="1080"></canvas> let canv = document.getElementById('myCanvas'); let ctx = canv.getContext('2d'); let
html转换成canvas文字空白,HTML5 Canvas toDataURL返回空白
05-26
这种情况可能是因为HTML中的文本内容无法直接转换成Canvas的图像，需要使用Canvas的API将文本内容绘制到Canvas上。以下是一个简单的示例代码，可以将HTML中的文本内容绘制到Canvas上并导出为图片： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML to Canvas</title> </head> <body> <div id="content"> <h1>Hello, World!</h1> <p>This is some text that we want to convert to an image.</p> </div> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 获取要绘制的HTML元素 var content = document.getElementById('content'); // 设置Canvas的宽度和高度 canvas.width = content.offsetWidth; canvas.height = content.offsetHeight; // 将HTML文本内容绘制到Canvas上 var data = '<svg xmlns="http://www.w3.org/2000/svg" width="' + canvas.width + '" height="' + canvas.height + '">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml">' + content.innerHTML + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); var url = DOMURL.createObjectURL(svg); img.onload = function() { // 绘制图像并导出为图片 ctx.drawImage(img, 0, 0); var png = canvas.toDataURL('image/png'); console.log(png); DOMURL.revokeObjectURL(png); }; img.src = url; </script> </body> </html> ``` 在这个例子中，我们首先获取了要绘制的HTML元素，然后将其内容用SVG格式包裹起来，并使用Canvas的API将SVG绘制到Canvas上。最后，我们将绘制完成的Canvas导出为PNG格式的图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值