[译]视区百分比,canvas.toBlob()以及WebRTC

原文:https://hacks.mozilla.org/2012/10/firefox-development-highlights-viewport-percentage-canvas-toblob-and-webrtc/

本文讲几个Firefox Nightly中的新特性.

视区百分比长度

Gecko现在支持了新的长度单位: vh, vw, vmin, vmax. 1vh就是视区高度的1%,而且该长度单位并不依赖于它的容器的尺寸.这样我们就可以构建一个直接和页面大小成比例的区域(比如HTML幻灯片,可以在不同的页面大小下显示相同的外观).

vh视区高度的1/100.vw视区宽度的1/100th.vmin视区高度和宽度之间最小值的1/100.vmax视区高度和宽度之间最大值的1/100.
了解更多相关知识:CSS视区百分比长度(MDN).

<canvas>.toBlob()

Blob对象类似于File对象,包含了文件的原始数据,且是不可变的.Blob对象可以用在许多不同的API上,比如File API和IndexedDB.我们可以通过window.URL.createObjectURL创建一个指向某个Blob对象的别名.可以用它在许多情况下代替Data URI的功能(更节约内存).

现在,canvas元素可以使用

toBlob()方法将图片内容导出成为一个图片类型的Blob对象了

(替换了原先非标准的mozGetAsFile方法).

toBlob方法是异步的

:

toBlob(callback, type)    //type默认值为"image/png"

了解更多相关知识:获取canvas所包含的图片文件(MDN).

译者注:我写了一个拼接大图的例子(Firefox Only),你可以拼接几张大图,体验一下Blob比DataURI快多少.注意:toBlob方法是异步的,所以浏览器会阻止在回调函数中用open打开的弹窗.

WebRTC,支持版本:Firefox Nightly (Firefox 19)和Firefox Aurora (Firefox 18)

首先需要激活WebRTC功能,修改about:config中的

media.peerconnection.enabled选项为t

rue

.MDN上有更多关于WebRTC的文档,我们以后还会在Mozilla Hacks发布关于WebRTC的文章.

另外,如果你想保持关注Firefox最新添加的功能,可以在Twitter上粉我们@FirefoxNightly.