canvas的toDataURL()方法
程序员文章站
2024-01-21 19:49:46
...
canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。
一、语法
canvas.toDataURL(type, encoderOptions);
二、参数
1、type：图片格式，默认为 image/png,可以是其他image/jpeg等
2、encoderOptions：0到1之间的取值，主要用来选定图片的质量，默认值是0.92，超出范围也会选择默认值。
三、返回值
返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<canvas id="mycanvas" width="200" height="200"></canvas>
<img src="" id="myImage">
<script type="text/javascript">
var cvs = document.getElementById('mycanvas'),
ctx = cvs.getContext('2d'),
img = document.getElementById('myImage');
ctx.fillStyle = "yellow";
ctx.fillRect(0, 0, 300, 400);
var imgDataSrc = cvs.toDataURL('image/png');
img.src = imgDataSrc;
</script>
</body>
</html>注意：(是借鉴MDN的)
1、如果画布的高度或宽度是0，那么会返回字符串“data:,”。
2、如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的(没遇到)
3、Chrome支持“image/webp”类型。
推荐阅读