js+HTML5實(shí)現(xiàn)視頻截圖的方法
本文實(shí)例講述了js+HTML5實(shí)現(xiàn)視頻截圖的方法。分享給大家供大家參考。具體如下:
1. HTML部分:
<video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output"></div>
2. 點(diǎn)擊按鈕時(shí)觸發(fā)如下代碼:
(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(); $output.prepend(img); }; $(initialize); }());
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- vue 使用html2canvas將DOM轉(zhuǎn)化為圖片的方法
- js使用html2canvas實(shí)現(xiàn)屏幕截取的示例代碼
- Javascript保存網(wǎng)頁為圖片借助于html2canvas庫實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)網(wǎng)頁截圖功能
- javascript在網(wǎng)頁中實(shí)現(xiàn)讀取剪貼板粘貼截圖功能
- js實(shí)現(xiàn)截圖保存圖片功能的代碼示例
- JavaScript+html5 canvas實(shí)現(xiàn)本地截圖教程
- JS打開攝像頭并截圖上傳示例
- JS實(shí)現(xiàn)div模塊的截圖并下載功能
- JS實(shí)現(xiàn)預(yù)加載視頻音頻/視頻獲取截圖(返回canvas截圖)
- javascript實(shí)現(xiàn)粘貼qq截圖功能(clipboardData)
- html2canvas屬性和使用方法以及如何使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片
相關(guān)文章
JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的浮動(dòng)碰撞效果,類似于廣告懸浮圖片在屏幕上來回碰撞的效果,涉及javascript結(jié)合時(shí)間動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2017-12-12js 實(shí)現(xiàn)在離開頁面時(shí)提醒未保存的信息(減少用戶重復(fù)操作)
在離開頁面時(shí)判斷是否有未保存的輸入值,然后進(jìn)行提醒,接下來介紹實(shí)現(xiàn)步驟,感興趣的朋友可以了解下2013-01-01原生JavaScript實(shí)現(xiàn)動(dòng)態(tài)省市縣三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例代碼
像平時(shí)購物選擇地址時(shí)一樣,通過選擇的省動(dòng)態(tài)加載城市列表,通過選擇的城市動(dòng)態(tài)加載縣區(qū)列表,從而可以實(shí)現(xiàn)省市縣的三級(jí)聯(lián)動(dòng),下面使用原生的JavaScript來實(shí)現(xiàn)這個(gè)功能,需要的朋友參考下吧2016-02-02微信小程序自定義select下拉選項(xiàng)框組件的實(shí)現(xiàn)代碼
微信小程序中沒有select下拉選項(xiàng)框,所以只有自定義。這篇文章主要介紹了微信小程序自定義select下拉選項(xiàng)框組件,需要的朋友可以參考下2018-08-08正則表達(dá)式判斷是否存在中文和全角字符和判斷包含中文字符串長(zhǎng)度
對(duì)于一些更安全的容錯(cuò)嚴(yán)重,需要用到2008-09-09JS實(shí)現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能
CheckBox控件就是我們一般所說的復(fù)選框,通常用于某選項(xiàng)的打開或關(guān)閉,如一次性處理多個(gè)產(chǎn)品,或?qū)ξ恼碌膭h除、產(chǎn)品的下架等處理,一條一條的點(diǎn)顯然有一些麻煩,如果能每一行放一個(gè)checkbox,然后統(tǒng)一處理就好辦的多了,需要的朋友可以參考下2016-02-02js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能
本文主要介紹了js實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼功能的示例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03基于JavaScript實(shí)現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)瀑布流效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03