HTMLCanvasElement

« DOM 参考

引进于 HTML5

HTML canvas元素接口

DOM canvas元素暴露了HTMLCanvasElement接口,该接口提供了用来操作一个canvas元素布局和呈现的属性和方法.HTMLCanvasElement接口继承了element接口的属性和方法.

属性

属性名 类型 描述
height unsigned long 反应出HTML中对应标签的height属性的值,指定了该元素所占空间的高度,单位为像素.
width unsigned long 反应出HTML中对应标签的width属性的值,指定了该元素所占空间的高度,单位为像素.

方法

方法名和参数 返回值 描述
getContext(in DOMString contextId) object 返回canvas的绘制上下文,如果指定的上下文ID不支持,则返回null.一个绘制上下文可以让你在canvas上绘图.目前可接受的参数有"2d"和"experimental-webgl"."experimental-webgl"上下文只在那些实现了WebGL的浏览器上可用.调用getContext("2d")会返回一个 CanvasRenderingContext2D对象,调用getContext("experimental-webgl")会返回一个WebGLRenderingContext对象.
toDataURL(in optional DOMString type, in any ...args) DOMString

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

  • 如果该canvas的宽度或长度是0,则会返回字符串"data:,".
  • 如果指定的type参数不是image/png,但返回的字符串是以data:image/png开头的,则所请求的图片类型不支持.
  • Chrome支持image/webp类型.
  • 如果type参数的值为image/jpeg或image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数,如果第二个参数的值不在0.0和1.0之间,则会使用默认的图片质量.

toBlob(in Function callback, in optional DOMString type, in any ...args) (not implemented in Chromium)

Blob 返回一个Blob对象,表示了包含在该canvas中的图片文件,这个文件可能缓存在硬盘上,也可能存储在内存中,这由浏览器决定.如果没有指定type参数,则默认使用image/png.
mozGetAsFile(in DOMString name, in optional DOMString type) File 返回一个File对象,表示了包含在该canvas中的图片文件,这个文件是存在于内存中的.还可以指定名称和图片类型,如果没有指定type参数,则默认使用image/png.
void mozFetchAsStream(in nsIInputStreamCallback callback, [optional] in DOMString type); void

当新的数据流准备好时,则会调用指定的回调函数nsIInputStreamCallback.onInputStreamReady(),如果没有指定type参数,则默认使用image/png.

注: 只能在chrome代码中使用.

例子: 从canvas对象中导出data: URL

首先在canvas上绘出图形,然后调用canvas.toDataURL(),就能获取到该canvas对象中所包含图片编码后的data: URL字符串.

function test() {
 var canvas = document.getElementById("canvas");
 var url = canvas.toDataURL();
 
 var newImg = document.createElement("img");
 newImg.src = url;
 document.body.appendChild(newImg);
}

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

例子:从canvas对象中获得文件

你还可以从canvas元素中导出一个图片文件.下例就演示了:如何把一个canvas元素转换成图片,再把图片地址传给一个<img>元素并显示出来.

function test() {
 var canvas = document.getElementById("canvas");
 canvas.toBlob(function(blob) {
    var newImg = document.createElement("img"),
        url = URL.createObjectURL(blob);
    newImg.onload = function() {
        // no longer need to read the blob so it's revoked
        URL.revokeObjectURL(url);
    };
    newImg.src = url;
    document.body.appendChild(newImg);
 });
}

你可以把这项技术和鼠标事件结合起来,从而可以动态的修改一张图片,下例中演示的是切换图片灰度化:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDC Example</title>
<script type="text/javascript">
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);
    }
}
</script>
</head>

<body onload="removeColors();">
<p><img class="grayscale" src="chagall.jpg" alt="" /></p>
</body>
</html>

注意,这里我们得到的是一张PNG图片,你还可以在toBlob()方法的第二个参数中指定图片类型.例如,下面的代码会得到一张JPEG格式的图片:

 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG 质量为95%

查看在线演示 (使用了mozGetAsFile())

浏览器支持

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 Unknown (3.6) 9.0 9.0 3.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) (Yes) ? 10.0 3.2

(Opera Mini 5.0-6.0 部分支持.)

 

Document Tags and Contributors

Contributors to this page: ziyunfei
最后编辑者: ziyunfei,