html5的Video怎么在暂停时截取当前帧的图片

利用canvas画布

<script>

    (function() {        

        "use strict"        

        var video, $output        

        var scale = 0.25        

        var initialize = function() {

            $output = $("#output")

            video = $("#video").get(0)

            $("#capture").click(captureImage)

        }        

        var captureImage = function() {

            var canvas = document.createElement("canvas")

            canvas.width = video.videoWidth * scale

            canvas.height = video.videoHeight * scale

            canvas.getContext('2d')

                .drawImage(video, 0, 0, canvas.width, canvas.height)            var img = document.createElement("img")

            img.src = canvas.toDataURL('image/png')

            $output.prepend(img)

        }

        $(initialize)

    }())

</script>

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸，用原生js开发的，轻量级，包含html跟css，不到8kb。点此链接体验： https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认：500) – 裁剪宽度

height:Number (默认：500) – 裁剪高度

ratio:Number (可选) – 裁剪的比例，当传入ratio时width/height将无效

src:String (必传) – 需要裁剪的图片，可以是图片链接，或者 base64

type:String (默认：jpeg) – 裁剪后图片的类型，仅支持 jpeg/png 两种

quality:Number (默认：0.9) – 压缩质量

buttonText:Array (默认：[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

---