HTMLCanvasElement.toDataURL()

TMLCanvasElement.toDataURL() 方法回傳含有圖像和參數設置特定格式的 data URIs (預設 PNG). 回傳的圖像解析度為 96 dpi.

  • 如果 canvas 的高度或是寬度為 0, 將會回傳字串 "data:,".
  • 如果要求的圖像類型並非 image/png, 但是回傳的類型卻是 data:image/png, 表示要求的圖像類型並不支援.
  • Chrome 也支援 image/webp 類型.

表達式

canvas.toDataURL(type, encoderOptions);

參數

type 選擇性
圖像格式的 DOMString. 預設為 image/png.
encoderOptions 選擇性
表示 image/jpeg 或是 image/webp 的圖像品質, 為0 到 1 之間的 Number.
如果值不在上述範圍中, 將會使用預設值. 其他的會忽略.

回傳值

包含 data URI 的 DOMString.

範例

創建 <canvas> 元素:

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

可以使用下面的方式獲取 data-URL:

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

設置圖像的品質

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

範例: 動態改變圖像

為了動態改變圖像, 可以與滑鼠事件一起使用 (gray-scale versus color in this example):

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() {
  var aImages = document.getElementsByClassName("grayscale"),
      nImgsLen = aImages.length,
      oCanvas = document.createElement("canvas"),
      oCtx = oCanvas.getContext("2d");
  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
    oColorImg = aImages[nImgId];
    nWidth = oColorImg.offsetWidth;
    nHeight = oColorImg.offsetHeight;
    oCanvas.width = nWidth;
    oCanvas.height = nHeight;
    oCtx.drawImage(oColorImg, 0, 0);
    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
    aPix = oImgData.data;
    nPixLen = aPix.length;
    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
    }
    oCtx.putImageData(oImgData, 0, 0);
    oGrayImg = new Image();
    oGrayImg.src = oCanvas.toDataURL();
    oGrayImg.onmouseover = showColorImg;
    oColorImg.onmouseout = showGrayImg;
    oCtx.clearRect(0, 0, nWidth, nHeight);
    oColorImg.style.display = "none";
    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
  }
}

規範

規範 狀態
WHATWG HTML Living Standard
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Living Standard No change since the latest snapshot, HTML5
HTML5.1
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Working Draft  
HTML5
The definition of 'HTMLCanvasElement.toDataURL' in that specification.
Recommendation Snapshot of the WHATWG HTML Living Standard containing the initial definition.

瀏覽器相容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4 3.6 (1.9.2) 9 9 4.0
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.2 18 1.0 (1.9.2) (Yes) 19 3.0

參見

文件標籤與貢獻者

標籤: 
 此頁面的貢獻者: alk03073135
 最近更新: alk03073135,