Canvas 导出 data:URL 数据

如果要把画布 ( canvas ) 导出为 data:URL 格式的数据,可以使用 canvas.toDataURL() 方法

toDataURL() 方法

canvas.toDataURL() 方法用于获取 canvas 对象中所包含图片编码后的 data: URL 字符串

语法

toDataURL(type, ...args)
参数 说明
type 可选,返回的图片的 MIME 类型,默认是 image/png
...args 其它额外参数

返回值

返回一个 data: URL ,根据 type 参数指定的类型将包含在 canvas 中的图片文件编码成字符串形式, type 参数的默认值为 image/png

  1. 如果该 canvas 的宽度或长度是 0,则会返回字符串 data:,

  2. 如果指定的 type 参数不是 image/png ,但返回的字符串是以 data:image/png 开头的,则所请求的图片类型不支持

  3. Chrome支持 image/webp 类型

  4. 如果 type 参数的值为 image/jpegimage/webp

    1. 第二个参数的值如果在 0.01.0 之间的话,会被看作是图片质量参数
    2. 如果第二个参数的值不在 0.01.0 之间,则会使用默认的图片质量

范例

将图像数据赋值给 <img> 显示出来

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="100">
</canvas>

导出后的图像

<div id="export-wrap"></div>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.fillStyle="green"
ctx.fillRect(10,10,100,50);
var url = c.toDataURL();

var newImg = document.createElement("img");
newImg.src = url;
document.getElementById("export-wrap").append(newImg);

</script>

运行结果如下

导出后的图像



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.