HTMLCanvasElement：toDataURL() 方法

基线广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2015 年 7 月.

HTMLCanvasElement.toDataURL() 方法返回一个包含图像表示形式的数据 URL，格式由 type 参数指定。

可以指定所需的格式和图像质量。如果未指定文件格式，或给定的格式不受支持，则数据将导出为 image/png。换句话说，如果返回的值以 data:image/png 开头，则表示对于任何其他请求的 type，该格式都不受支持。

浏览器需要支持 image/png；许多浏览器还将支持其他格式，包括 image/jpeg 和 image/webp。

对于支持编码分辨率元数据的图像格式，生成的图像数据将具有 96dpi 的分辨率。

警告：toDataURL() 将整个图像编码为内存字符串。对于较大的图像，这可能会影响性能，甚至在分配给 HTMLImageElement.src 时超出浏览器的 URL 长度限制。通常，您应该更倾向于使用 toBlob()，并结合使用 URL.createObjectURL()。

语法

toDataURL()
toDataURL(type)
toDataURL(type, encoderOptions)

参数

type 可选: 指示图像格式的字符串。默认类型为 image/png；如果指定的类型不受支持，也将使用此图像格式。
encoderOptions 可选: 一个介于 0 和 1 之间的 Number，指示在使用支持有损压缩的文件格式（例如 image/jpeg 或 image/webp）创建图像时要使用的图像质量。如果未指定此选项，或者数字超出允许范围，则用户代理将使用其默认质量值。

返回值

包含请求的数据 URL 的字符串。

如果画布的高度或宽度为 0 或大于最大画布大小，则返回字符串 "data:,"。

异常

SecurityError: 画布的位图不是源干净的；其至少一部分内容已加载或可能已从文档本身加载的站点以外的站点加载。

示例

给定此 <canvas> 元素

html

<canvas id="canvas" width="5" height="5"></canvas>

您可以使用以下几行获取画布的数据 URL

const canvas = document.getElementById("canvas");
const dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

使用 jpeg 设置图像质量

const fullQuality = canvas.toDataURL("image/jpeg", 1.0);
// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…9oADAMBAAIRAxEAPwD/AD/6AP/Z"
const mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
const lowQuality = canvas.toDataURL("image/jpeg", 0.1);

示例：动态更改图像

您可以将此技术与鼠标事件结合使用，以动态更改图像（在此示例中为灰度与彩色）。

HTML

html

<img class="grayscale" src="myPicture.png" alt="Description of my picture" />

JavaScript

window.addEventListener("load", removeColors);

function showColorImg() {
  this.style.display = "none";
  this.nextSibling.style.display = "inline";
}

function showGrayImg() {
  this.previousSibling.style.display = "inline";
  this.style.display = "none";
}

function removeColors() {
  const images = document.getElementsByClassName("grayscale");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");

  for (const colorImg of images) {
    const width = colorImg.offsetWidth;
    const height = colorImg.offsetHeight;
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(colorImg, 0, 0);
    const imgData = ctx.getImageData(0, 0, width, height);
    const pix = imgData.data;
    const pixLen = pix.length;
    for (let pixel = 0; pixel < pixLen; pixel += 4) {
      pix[pixel + 2] =
        pix[pixel + 1] =
        pix[pixel] =
          (pix[pixel] + pix[pixel + 1] + pix[pixel + 2]) / 3;
    }
    ctx.putImageData(imgData, 0, 0);
    const grayImg = new Image();
    grayImg.src = canvas.toDataURL();
    grayImg.onmouseover = showColorImg;
    colorImg.onmouseout = showGrayImg;
    ctx.clearRect(0, 0, width, height);
    colorImg.style.display = "none";
    colorImg.parentNode.insertBefore(grayImg, colorImg);
  }
}

规范

规范
HTML 标准 # dom-canvas-todataurl-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

数据 URL 在 HTTP 参考中。