整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頻具有彈幕功能，打開彈幕，發表的評論就會直接出現在屏幕上，甚至有的時候大家的彈幕比視頻內容還要精彩。那么圖片能不能添加彈幕，怎么添加彈幕呢？其實只需要簡單的一步，就能做出這樣的效果啦，一起看下吧。
1、搜索彈幕素材，找到合適的圖片彈幕樣式，點擊使用。
2、在編輯區選中樣式，點擊動畫，替換圖片，修改彈幕文字內容，可以修改字號、顏色、是否加粗、運動快慢等，在右側就能看到修改后的狀態，隨時調整。最后沒有問題的話，點擊確定，就會出現在編輯區了。
3、如果覺得彈幕太多了，想要減少幾條，需要點擊html，選中<text>……</text>刪除即可。如果是添加彈幕的話，也是相同的道理，選中<text>……</text>復制，然后回車CTRL+V粘貼，注意調整新加彈幕的運動時間。
最后，排版完成后，點擊右側的微信復制按鈕，在公眾平臺編輯頁面CTRL+V粘貼就完成了。
以上就是圖片彈幕的操作步驟啦，是不是超級簡單呢，快點親自試一下吧。
?
讀
本文內容是筆者最近實現的 web 端彈幕組件—— Barrage UI（https://github.com/parksben/barrage） 的一個延伸。在閱讀本文的實例和相關代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關接口進行了解。
各位童鞋如果經常上 B 站（bilibili.com） ，應該對 蒙版彈幕 這個概念并不陌生。
蒙版彈幕是由知名彈幕視頻網站 bilibili 于 2018 年中推出的一種彈幕渲染效果，可以有效減少彈幕文字對視頻主體信息的干擾。
關于 B 站蒙版彈幕的實現原理，其實網上已經有很多細致的討論和研究。個人總結了一下，大致要點如下：
客戶端方面，由于 B 站彈幕是基于 div+css 的實現，因而采用了 svg 格式來傳輸矢量蒙版（至少目前是這樣），通過 CSS 遮罩的方式實現渲染。
■乎上有一篇關于這個方案的討論，感興趣的童鞋可以移步 這里（https://www.zhihu.com/question/279446628） 進行了解。
Barrage UI（https://github.com/parksben/barrage） 是個人最近實現的一個前端彈幕組件，主要用于在前端頁面中掛載彈幕動畫。
組件提供了一系列的操作接口以方便用戶對彈幕的相關特性進行定制。你也可以在渲染層面對動畫中的每一幀圖像進行處理，比如：
下面是基于 Barrage UI 組件實現的蒙版彈幕效果：
編者注：圖片這么糊是微信公眾平臺的鍋。
由于文中不方便嵌入視頻，Demo 的實際效果請移步到 此處（https://parksben.github.io/masking-danmaku-demo） 查看。
下面我們來介紹如何實現上圖的動畫效果。
Demo 中使用了初音小姐姐跳舞的視頻。最主要的特點是除了人物外，視頻的背景是比較一致的純色。對于這種類型的圖像，我們可以使用 色鍵 的方式進行摳圖（生成“蒙版”）。
色度鍵控（https://zh.wikipedia.org/zh/%E8%89%B2%E9%94%AE），又稱色彩嵌空，是一種去背合成技術。Chroma 為純色之意，Key 則是抽離顏色之意。把被拍攝的人物或物體放置于綠幕的前面，并進行去背后，將其替換成其他的背景。此技術在電影、電視劇及游戲制作中被大量使用，色鍵也是虛擬攝影棚（Virtual studio）與視覺效果（Visual effects）當中的一個重要環節。
下圖是色鍵技術的一個示例：在綠幕前穿著藍色衣服的小姐姐，左圖為去背前，右圖為去背后的新背景。
在瀏覽器環境中，我們可以通過 canvas 畫布實時地繪制視頻的每一幀，并從畫布中讀取到圖像中每個像素的 RGBA 信息，檢測每個點的 R(red)、G(green)、B(blue) 值是否滿足要求，最終將需要扣除的像素的 A(alpha) 值置為 0，即可得到用于合成蒙版彈幕的蒙版圖像。
注意：
Barrage UI 組件的蒙版功能是基于 Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 屬性實現的（使用了 source-in 的混合模式），因而只需將不需要的像素設置為透明（alpha=0）即可，并不需要改變圖像的 RGB 色值。
下面介紹此案例的代碼實現。
直接使用 yarn 或 npm 安裝此組件：
yarn add barrage-ui or npm install --save barrage-ui
準備一個 video 元素用于播放視頻，video 的父級元素用于掛載彈幕：
<div id="container">
<video id="video" src="videos/demo.mp4" controls>
</video>
</div>根據視頻的實際尺寸（880×540）設置 #container 與 #video 的樣式：
html,
body {
font: 14px/18px Helvetica, Arial, 'Microsoft Yahei', Verdana, sans-serif;
width: 100%;
margin: 0;
padding: 0;
background: #eee;
overflow: hidden;
}
#container,
#video {
width: 880px;
height: 540px;
}
#container {
margin: 0 auto;
margin-top: 50vh;
margin-left: 50vw;
transform: translate(-50%, -50%);
background-color: #ddd;
}import Barrage from 'barrage-ui';
import data from 'utils/mockData';
// 獲取父級容器
const container=document.getElementById('container');
// 創建彈幕實例
const barrage=new Barrage({
container: container,
});
// 重置畫布高度，避免彈幕遮擋視頻播放控件
barrage.canvas.height=container.clientHeight - 80;
// 裝填彈幕數據
barrage.setData(data);其中，mockData 是用于生成隨機彈幕數據的方法。
關于彈幕數據的內容與格式，詳見 Barrage UI 項目文檔（https://github.com/parksben/barrage#%E8%A3%85%E5%A1%AB%E5%BC%B9%E5%B9%95）
// 獲取 video 元素
const video=document.getElementById('video');
// 新建一個畫布來實時繪制視頻（純繪圖，不用添加進頁面）
const vCanvas=document.createElement('canvas');
vCanvas.width=video.clientWidth;
vCanvas.height=video.clientHeight;const vContext=vCanvas.getContext('2d');
// 實時繪制視頻到畫布
barrage.afterRender=()=> {
vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);
};使用組件提供的渲染周期鉤子 .afterRender() 可以在彈幕動畫的每一幀圖像渲染后，將視頻圖像繪制到中間畫布 vCanvas 上。注意這里的 vCanvas 畫布主要用于實時地獲取視頻圖像，并不需要添加到頁面中。
// 渲染前讀取畫布 vCanvas 的數據，并處理為蒙版圖像
barrage.beforeRender=()=> {
// 讀取圖像
const frame=vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);
// 圖像總像素個數
const pxCount=frame.data.length / 4;
// 將 frame 構造成我們需要的蒙版圖像
for (let i=0; i < pxCount; i++) {
// 這里不用 ES6 解構賦值的寫法，主要為了保證性能
// PS: 這里如果用解構賦值語法將導致大量新對象的創建，是個很耗時的過程
const r=frame.data[i * 4 + 0];
const g=frame.data[i * 4 + 1];
const b=frame.data[i * 4 + 2];
// 將黑色區域以外的內容設為透明
if (r > 15 || g > 15 || b > 15) {
frame.data[4 * i + 3]=0;
}
}
// 設置蒙版
barrage.setMask(frame);
};使用組件提供的渲染周期鉤子 .beforeRender() 可以在彈幕動畫的每一幀圖像渲染前計算出蒙版圖像。其中，用于更新蒙版的接口為 .setMask()。
最后，為了讓彈幕的行為與視頻播放的操作協同，還需要進行一些綁定的操作：
// 綁定播放事件
video.addEventListener( 'play',
( )=> {
barrage.play();
}, false);
// 綁定暫停事件
video.addEventListener( 'pause',
( )=> {
barrage.pause();
}, false);
// 切換播放進度
video.addEventListener( 'seeked',
( )=> {
barrage.goto(video.currentTime * 1000);
}, false);這里分別用到 Brrage UI 組件的 .play() .pause .goto() 三個接口，分別用于播放、暫停和切換彈幕動畫的進度。需要注意的是，通過 video.currentTime 屬性獲取到的視頻播放進度是一個單位為 秒 的浮點數，需要轉換為 毫秒數 再傳給彈幕組件。
本文的案例已上傳 Github，感興趣的童鞋可以點擊 這里（https://github.com/parksben/masking-danmaku-demo） 查看源碼細節。
關于 Barrage UI 組件如果有什么建議和疑問，歡迎大家在項目中提 issue 給我，幫助我持續改進和迭代，更歡迎 star 和 PR。
作者:Parksben
來源:微信公眾號:創宇前端
出處:https://mp.weixin.qq.com/s/0HwQh5nUaK6Vi0EWbU8ENQ
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
