鍍金池/ 問答/HTML5  HTML/ 前端實(shí)現(xiàn)類似QQ截圖功能中，鼠標(biāo)選中區(qū)域輸入文字

前端實(shí)現(xiàn)類似QQ截圖功能中，鼠標(biāo)選中區(qū)域輸入文字

現(xiàn)在有一個需求，需要做一個視頻截圖功能，并且需要在選中的區(qū)域內(nèi)添加說明文字。

已經(jīng)解決的技術(shù)點(diǎn)：
利用HTML5的canvas+JS可以保存視頻某一幀為一張圖片

問題:
怎么在剛剛保存的那張圖上。鼠標(biāo)拖動選中一區(qū)域可以輸入文字。然后再保存為圖片。

回答
編輯回答
落殤

先說一下思路：
第一步：先利用canvas視頻截圖，生成圖片并創(chuàng)建DOM；
第二步：當(dāng)被創(chuàng)建的DOM被按下鼠標(biāo)時，開始創(chuàng)建文字輸入的DOM，并跟隨鼠標(biāo)拖動改變該DOM大??；
第三步：當(dāng)鼠標(biāo)松開時使文字DOM獲得焦點(diǎn)；
第四部：輸入完成，再次截圖保存；

關(guān)于第四步截圖會有點(diǎn)麻煩，這里有一個庫比較好用
html2canvas

2018年4月22日 09:03
編輯回答
你的瞳

創(chuàng)建一個 DOM ，輸入文字，然后這個 DOM 可以轉(zhuǎn)到 canvas ： https://developer.mozilla.org...

這個 canvas 跟你視頻截的那個 canvas 疊在一起，再轉(zhuǎn)成圖。

2017年8月25日 20:22