视区百分比,canvas.toBlob()以及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打开的弹窗.