zoukankan      html  css  js  c++  java
  • [译]视区百分比,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选项为true.MDN上有更多关于WebRTC的文档,我们以后还会在Mozilla Hacks发布关于WebRTC的文章.

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

  • 相关阅读:
    团队冲刺第八天
    团队冲刺第七天
    团队冲刺第六天
    团队冲刺第五天
    找水王
    团队冲刺第四天
    团队冲刺第三天
    团队冲刺第二天
    团队冲刺第一天
    spring冲刺计划
  • 原文地址:https://www.cnblogs.com/ziyunfei/p/2738186.html
Copyright © 2011-2022 走看看