了解CanvasImageSource

    简介

    CanvasImageSource只是一个代称,提示未定义)。是所有可以作为Canvas画布图片资源的统称,可以看成是一个简化的规范。,而非真的接口(控制台运行CanvasImageSource会报错

    其运行的图片资源类型包括下面这些:

    • HTMLImageElement

      也即是HTML中常用的<img>元素,可以是页面中的DOM对象,也可以是内存中创建的IMG对象。

    • SVGImageElement

      也就是SVG中的<image>元素。该接口继承关系如下图:

      EventTargetNodeElementSVGElementSVGGraphicsElementSVGImageElement

    • HTMLVideoElement

      也就是HTML5中的<video>元素。该接口继承关系如下图:

      EventTargetNodeElementHTMLElementHTMLMediaElementHTMLVideoElement

    • HTMLCanvasElement

      也就是HTML5中的<canvas>元素,详见这里

    • ImageBitmap

      ImageBitmap接口表示一个位图图像,可以将其绘制到Canvas而不会产生不适当的延迟。详见这里

    • OffscreenCanvas

      此接口提供了一个可以在屏幕外渲染的Canvas画布。它在window和worker上下文中都可用。使用示意:

      var offscreen = new OffscreenCanvas(256, 256);

      此接口兼容性比较差,且专为WebGL设计。本文档旨在推广Canvas 2D API,因此不展开。

    案例

    演示如何把HTMLVideoElement图像资源绘制到Canvas画布上。下面这个是视频资源:

    点击下面这个按钮,可以把当前视频图像保留绘制在画布上。

    效果如下:

    相关HTML和JavaScript代码如下:

    ¥lt.video id="video" width="180" height="314" autoplay autobuffer muted¥gt.
        ¥lt.source src=";/sing-song;mp4" type="video/mp4"¥gt.
    ¥lt./video¥gt.
    ¥lt.input type="button" id="button" value="截取视频"¥gt.
    ¥lt.canvas id="canvas" width="180" height="314"¥gt.¥lt./canvas¥gt.
    var context } canvas,getContext;)2d)'(
    // 按钮
    button,addEventListener;)click). function ;' {
        context,clearRect;0. 0. 180. 314'(
        context,drawImage;video. 0. 0. 180. 314'(
    ='(

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasImageSource'
    现行标准 初步定义。

    相关资源

    暂无


    by zhangxinxu 2018-10-15 23:54:15