1、npm安裝

安裝過程比較簡單，不做重復(fù)，說一下使用過程遇到的問題

1. 如果編輯器放到了table td內(nèi)，會(huì)發(fā)現(xiàn)插入分隔線（也就是插入hr）不好用，沒有找到在哪里改，換一個(gè)方式去實(shí)現(xiàn)：直接使用editor.config.menus = []加載我們使用的菜單，主要是為了去掉splitLine（分隔線），然后使用自定義擴(kuò)展菜單創(chuàng)建新的分隔線菜單；
2. 添加查看源碼擴(kuò)展；
3. 彈出的窗口關(guān)閉的時(shí)候，只是切換到了后邊的菜單不能關(guān)閉菜單。

插入hr

import E from 'wangeditor'

mounted () {
    const editor = new E('#div1')
    const menuKey = 'hrMenuKey'
    const { BtnMenu } = E

    // 第一，菜單 class ，Button 菜單繼承 BtnMenu class

    class HrMenu extends BtnMenu {
      constructor (editor) {
        // data-title屬性表示當(dāng)鼠標(biāo)懸停在該按鈕上時(shí)提示該按鈕的功能簡述
        const $elem = E.$(
          `<div class="w-e-menu" data-title="分割線">
            <i class='w-e-icon-split-line'></i>
          </div>`
        )
        super($elem, editor)
      }
      // 菜單點(diǎn)擊事件
      clickHandler () {
        editor.cmd.do('insertHtml', '<hr>')
      }
      tryChangeActive () {
        // 激活菜單
        // 1. 菜單 DOM 節(jié)點(diǎn)會(huì)增加一個(gè) .w-e-active 的 css class
        // 2. this.this.isActive === true
        this.active()
        // // 取消激活菜單
        // // 1. 菜單 DOM 節(jié)點(diǎn)會(huì)刪掉 .w-e-active
        // // 2. this.this.isActive === false
        // this.unActive()
      }
    }
    // 注冊(cè)菜單
    E.registerMenu(menuKey, HrMenu)

    editor.config.placeholder = ''
    editor.config.uploadImgServer = '/public/sss/admin.php/ajaxweb/uppic.html'
    editor.config.uploadImgMaxSize = 1024 * 1024
    editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif']
    editor.config.height = 300
    editor.config.focus = true
    editor.config.menus = [
      'source',
      'head',
      'bold',
      'fontSize',
      'fontName',
      'italic',
      'underline',
      'strikeThrough',
      'indent',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'list',
      'justify',
      'quote',
      'image',
      'video',
      'table',
      'undo',
      'redo']
    editor.create()
}

查看源碼

實(shí)現(xiàn)目標(biāo)：

點(diǎn)擊查看的時(shí)候，遮蓋其它的按鈕，防止查看源碼的時(shí)候，點(diǎn)擊了別的按鈕進(jìn)行了誤操作。

新加的菜單默認(rèn)都是在最后全屏前邊，分割線還可以，但是查看源碼我個(gè)人還是習(xí)慣在最前邊，使用的是jquery prepend感覺更加簡單一些，代碼如下：

import $ from 'jquery'
mounted () {
  $(document).ready(function () {
      $('#div1 .w-e-toolbar').prepend('<div class=\'w-e-menu\' style=\'z-index:991;\' data-title=\'查看源碼\'><a style=\' display:block;width:100%;height:100%;\' ct=1 id=\'viewsource\'><i class=\'fa fa-file-text-o\'></i></a></div>')
      $(document).delegate('#viewsource', 'click', function () {
        var editorHtml = editor.txt.html()
        // console.log($(this).attr('ct'))
        if (parseInt($(this).attr('ct')) === 1) {
          $('#div1 .w-e-toolbar').prepend('<div id=\'zzc\' style=\'position:absolute;left:0;top:0;z-index:99;background-color:rgba(0,0,0,0.5);width:100%;height:40px;\'></div>')
          $(this).parent().parent().parent().find('.w-e-text').css('width', $('.w-e-text').width() + 'px')
          editorHtml = editorHtml.replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ')
          $(this).attr('ct', '2')
          $(this).css({'background-color': '#EEE'})
        } else {
          editorHtml = editor.txt.text().replace(/</ig, '<').replace(/>/ig, '>').replace(/ /ig, ' ')
          $(this).attr('ct', '1')
          $(this).parent().parent().parent().find('.w-e-text').css('width', '100%')
          $(this).parent().parent().find('#zzc').remove()
          $(this).css({'background-color': '#FFF'})
        }
        editor.txt.html(editorHtml)
        // editor.change && editor.change()
      })
    })
}

說明：

1. 使用jquery prepend向頭部插入查看源碼按鈕；
2. ct用來判斷是查看源碼，還是切換回原來的格式：1 查看源碼 2切換回原來的；
3. <div id="zzc"></div>是遮罩層，用于點(diǎn)擊查看的時(shí)候遮蓋其它按鈕，防止誤操作，查看的時(shí)候添加，切換的時(shí)候移除；
4. 查看源碼的時(shí)候，如果全是英文有可能出現(xiàn)不換行，頁面被撐開的情況（因?yàn)閷挾仁?00%），所以這里要獲取編輯器所在div w-e-text的寬度（像素），通過jquery重新設(shè)置寬度；

彈出的窗口，點(diǎn)擊關(guān)閉無效不能關(guān)閉

如圖，點(diǎn)擊關(guān)閉的時(shí)候會(huì)切換到了網(wǎng)絡(luò)圖片的表單，這應(yīng)該是菜單同級(jí)別，遮蓋了關(guān)閉的按鈕，所以我們要寫css樣式加上z-index使關(guān)閉的菜單在其他的上層；

css代碼

.w-e-icon-close{
   display:block;
   z-index:999999 !important;
}

2、cdn引用js

我是下載到本地的

圖片上傳，如果選擇多個(gè)圖片，可能會(huì)出現(xiàn)以上圖片的情況style="font-size: 14px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", Tahoma, Arial, sans-serif; max-width: 100%;"

復(fù)制html發(fā)現(xiàn)是如下代碼：

<img src="/public/upload/image/20211201/111.jpg" style="font-size: 14px; font-family: & quot;Helvetica Neue& quot;, Helvetica, & quot;PingFang SC& quot;, Tahoma, Arial, sans-serif; max-width: 100%;">

很明顯style內(nèi)的 css樣式，不是應(yīng)該出現(xiàn)的，沒有找到在哪里修改。

雙引號(hào)換成了& quot;如果不用查看源碼，頁面直接顯示沒有問題，但是查看源碼，切換回來以后，會(huì)發(fā)現(xiàn)圖片亂了，所以查看源碼的時(shí)候，需要把& quot;替換成空。

以下使用jquery實(shí)現(xiàn)自定義菜單（查看源碼、插入分割線）：

import $ from 'jquery'
  mounted () {
      $(document).ready(function () {
      //  查看源碼菜單
      $('#div1 .w-e-toolbar').prepend('<div class=\'w-e-menu\' style=\'z-index:991;\' data-title=\'查看源碼\'><a style=\' display:block;width:100%;height:100%;\' ct=1 id=\'viewsource\'><i class=\'fa fa-file-text-o\'></i></a></div>')
      //  分割線菜單
      var menl=$('#div1 .w-e-toolbar .w-e-menu').length;
		  $("#div1  .w-e-toolbar .w-e-menu").eq(menl-1).before('<div class=\'w-e-menu\'  data-title=\'分割線\'><a  style=\'display:block;width:100%;height:100%;\' id=\'splitline\'><i class=\'w-e-icon-split-line\'></i></a></div>')
      //  查看源碼點(diǎn)擊
      $(document).delegate('#viewsource', 'click', function () {
        var editorHtml = editor.txt.html()
        // console.log($(this).attr('ct'))
        if (parseInt($(this).attr('ct')) === 1) {
          $('#div1 .w-e-toolbar').prepend('<div id=\'zzc\' style=\'position:absolute;left:0;top:0;z-index:99;background-color:rgba(0,0,0,0.5);width:100%;height:40px;\'></div>')
          $(this).parent().parent().parent().find('.w-e-text').css('width', $('.w-e-text').width() + 'px')
          editorHtml = editorHtml.replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ').replace(/& quot;/g, '')
          $(this).attr('ct', '2')
          $(this).css({'background-color': '#EEE'})
        } else {
          editorHtml = editor.txt.text().replace(/</ig, '<').replace(/>/ig, '>').replace(/ /ig, ' ')
          $(this).attr('ct', '1')
          $(this).css('border', '0px solid #DDD')
          $(this).parent().parent().parent().find('.w-e-text').css('width', '100%')
          $(this).parent().parent().find('#zzc').remove()
          $(this).css({'background-color': '#FFF'})
        }
        editor.txt.html(editorHtml)
        // editor.change && editor.change()
      })
      //分割線插入hr點(diǎn)擊
	    $(document).delegate('#splitline', 'click', function () {
		    editor.cmd.do('insertHtml', '<hr>');
	    });
    })
  
  }

如果我們把插入分割線的代碼單獨(dú)拿出來，只是下面幾行，相對(duì)使用官方提供的方法會(huì)簡單很多

      //   插入分割線菜單  
      var menl=$('#div1 .w-e-toolbar .w-e-menu').length;
		  $('#div1  .w-e-toolbar .w-e-menu').eq(menl-1).before('<div class=\'w-e-menu\'  data-title=\'分割線\'><a  style=\'display:block;width:100%;height:100%;\' id=\'splitline\'><i class=\'w-e-icon-split-line\'></i></a></div>')
      // 分割線插入 hr點(diǎn)擊事件
	    $(document).delegate('#splitline', 'click', function () {
		    editor.cmd.do('insertHtml', '<hr>');
	    });

說明：

1. menl是菜單的個(gè)數(shù)；
2. $("#div1 .w-e-toolbar .w-e-menu").eq(menl-1).before 使用jquery before向最后一個(gè)菜單（也就是全屏菜單）之前插入分割線按鈕，使用after也可以；
3. 查看源碼的替換多加了.replace(/& quot;/g, ‘’) ；
4. 如果是cdn引入的js可能出現(xiàn)菜單一些功能不好用的情況，點(diǎn)擊了沒反應(yīng)，可以嘗試把const editor = new E('#div1') 換成window.editor = new E('#div1')
5. 注意：因?yàn)? quot;連起來會(huì)被轉(zhuǎn)換成雙引號(hào)，這里沒法顯示，實(shí)際替換的時(shí)候要連起來，不要有空格；

editorHtml = editorHtml.replace(/</g, '<').replace(/>/g, '>').replace(/ /g, ' ').replace(/& quot;/g, '') 

附錄一下jquery after，before，append，prepend用法：

向class=w-e-toolbar的div頭部插入html

$(" .w-e-toolbar").prepend("<div >頭部插入html</div>")

向class=w-e-toolbar的div底部插入html

$(" .w-e-toolbar").append("<div >底部插入html</div>")

向class=w-e-toolbar的div之前插入html

$(" .w-e-toolbar").before("<div >之前插入html</div>")

向class=w-e-toolbar的div之后插入html

$(" .w-e-toolbar").after("<div >后面插入html</div>")

可以做一下延伸：像我們上邊用到的向第幾個(gè)元素之后或者之前插入代碼。

讀

本文內(nèi)容是筆者最近實(shí)現(xiàn)的 web 端彈幕組件—— Barrage UI（https://github.com/parksben/barrage） 的一個(gè)延伸。在閱讀本文的實(shí)例和相關(guān)代碼之前，不妨先瀏覽項(xiàng)目文檔，對(duì)組件的使用方式和相關(guān)接口進(jìn)行了解。

各位童鞋如果經(jīng)常上 B 站（bilibili.com） ，應(yīng)該對(duì) 蒙版彈幕 這個(gè)概念并不陌生。

蒙版彈幕是由知名彈幕視頻網(wǎng)站 bilibili 于 2018 年中推出的一種彈幕渲染效果，可以有效減少彈幕文字對(duì)視頻主體信息的干擾。

關(guān)于 B 站蒙版彈幕的實(shí)現(xiàn)原理，其實(shí)網(wǎng)上已經(jīng)有很多細(xì)致的討論和研究。個(gè)人總結(jié)了一下，大致要點(diǎn)如下：

1. 基于用戶數(shù)據(jù)和一些機(jī)器學(xué)習(xí)的相關(guān)應(yīng)用，可以提煉出視頻的關(guān)鍵主體
2. 服務(wù)端預(yù)先對(duì)視頻進(jìn)行處理，并生成相應(yīng)的蒙版數(shù)據(jù)
3. 客戶端播放視頻時(shí)，實(shí)時(shí)地加載對(duì)應(yīng)資源
4. 通過一些前端的技術(shù)手段，實(shí)現(xiàn)彈幕的蒙版處理

客戶端方面，由于 B 站彈幕是基于 div+css 的實(shí)現(xiàn)，因而采用了 svg 格式來傳輸矢量蒙版（至少目前是這樣），通過 CSS 遮罩的方式實(shí)現(xiàn)渲染。

■乎上有一篇關(guān)于這個(gè)方案的討論，感興趣的童鞋可以移步 這里（https://www.zhihu.com/question/279446628） 進(jìn)行了解。

Barrage UI

Barrage UI（https://github.com/parksben/barrage） 是個(gè)人最近實(shí)現(xiàn)的一個(gè)前端彈幕組件，主要用于在前端頁面中掛載彈幕動(dòng)畫。

組件提供了一系列的操作接口以方便用戶對(duì)彈幕的相關(guān)特性進(jìn)行定制。你也可以在渲染層面對(duì)動(dòng)畫中的每一幀圖像進(jìn)行處理，比如：

1. 實(shí)時(shí)讀取視頻信息
2. 對(duì)每一幀視頻圖像進(jìn)行實(shí)時(shí)處理，計(jì)算出摳圖蒙版
3. 將計(jì)算出的蒙版?zhèn)鹘o彈幕組件，以實(shí)現(xiàn)實(shí)時(shí)的蒙版彈幕

下面是基于 Barrage UI 組件實(shí)現(xiàn)的蒙版彈幕效果：

編者注：圖片這么糊是微信公眾平臺(tái)的鍋。

由于文中不方便嵌入視頻，Demo 的實(shí)際效果請(qǐng)移步到 此處（https://parksben.github.io/masking-danmaku-demo） 查看。

下面我們來介紹如何實(shí)現(xiàn)上圖的動(dòng)畫效果。

色鍵（色度鍵控）

Demo 中使用了初音小姐姐跳舞的視頻。最主要的特點(diǎn)是除了人物外，視頻的背景是比較一致的純色。對(duì)于這種類型的圖像，我們可以使用 色鍵 的方式進(jìn)行摳圖（生成“蒙版”）。

色度鍵控（https://zh.wikipedia.org/zh/%E8%89%B2%E9%94%AE），又稱色彩嵌空，是一種去背合成技術(shù)。Chroma 為純色之意，Key 則是抽離顏色之意。把被拍攝的人物或物體放置于綠幕的前面，并進(jìn)行去背后，將其替換成其他的背景。此技術(shù)在電影、電視劇及游戲制作中被大量使用，色鍵也是虛擬攝影棚（Virtual studio）與視覺效果（Visual effects）當(dāng)中的一個(gè)重要環(huán)節(jié)。

下圖是色鍵技術(shù)的一個(gè)示例：在綠幕前穿著藍(lán)色衣服的小姐姐，左圖為去背前，右圖為去背后的新背景。

如何扣取視頻圖像

在瀏覽器環(huán)境中，我們可以通過 canvas 畫布實(shí)時(shí)地繪制視頻的每一幀，并從畫布中讀取到圖像中每個(gè)像素的 RGBA 信息，檢測每個(gè)點(diǎn)的 R(red)、G(green)、B(blue) 值是否滿足要求，最終將需要扣除的像素的 A(alpha) 值置為 0，即可得到用于合成蒙版彈幕的蒙版圖像。

注意：

Barrage UI 組件的蒙版功能是基于 Canvas 2D API 的 CanvasRenderingContext2D.globalCompositeOperation 屬性實(shí)現(xiàn)的（使用了 source-in 的混合模式），因而只需將不需要的像素設(shè)置為透明（alpha=0）即可，并不需要改變圖像的 RGB 色值。

下面介紹此案例的代碼實(shí)現(xiàn)。

具體實(shí)現(xiàn)

安裝 Barrage UI 組件

直接使用 yarn 或 npm 安裝此組件：

yarn add barrage-ui or npm install --save barrage-ui

HTML + CSS

準(zhǔn)備一個(gè) video 元素用于播放視頻，video 的父級(jí)元素用于掛載彈幕：

<div id="container">
  <video id="video" src="videos/demo.mp4" controls>
</video>
</div>

根據(jù)視頻的實(shí)際尺寸（880×540）設(shè)置 #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;
}

創(chuàng)建彈幕

import Barrage from 'barrage-ui';
import data from 'utils/mockData';

// 獲取父級(jí)容器
const container = document.getElementById('container');

// 創(chuàng)建彈幕實(shí)例
const barrage = new Barrage({
  container: container,
});

// 重置畫布高度，避免彈幕遮擋視頻播放控件
barrage.canvas.height = container.clientHeight - 80;

// 裝填彈幕數(shù)據(jù)
barrage.setData(data);

其中，mockData 是用于生成隨機(jī)彈幕數(shù)據(jù)的方法。

關(guān)于彈幕數(shù)據(jù)的內(nèi)容與格式，詳見 Barrage UI 項(xiàng)目文檔（https://github.com/parksben/barrage#%E8%A3%85%E5%A1%AB%E5%BC%B9%E5%B9%95）

實(shí)時(shí)獲取視頻圖像

// 獲取 video 元素
const video = document.getElementById('video');

// 新建一個(gè)畫布來實(shí)時(shí)繪制視頻（純繪圖，不用添加進(jìn)頁面）
const vCanvas = document.createElement('canvas');
vCanvas.width = video.clientWidth;
vCanvas.height = video.clientHeight;const vContext = vCanvas.getContext('2d');

// 實(shí)時(shí)繪制視頻到畫布
barrage.afterRender = () => {
  vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);
};

使用組件提供的渲染周期鉤子 .afterRender() 可以在彈幕動(dòng)畫的每一幀圖像渲染后，將視頻圖像繪制到中間畫布 vCanvas 上。注意這里的 vCanvas 畫布主要用于實(shí)時(shí)地獲取視頻圖像，并不需要添加到頁面中。

實(shí)時(shí)計(jì)算蒙版信息

// 渲染前讀取畫布 vCanvas 的數(shù)據(jù)，并處理為蒙版圖像
barrage.beforeRender = () => {

  // 讀取圖像
  const frame = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);
  
  // 圖像總像素個(gè)數(shù)
  const pxCount = frame.data.length / 4; 
  
 // 將 frame 構(gòu)造成我們需要的蒙版圖像
  for (let i = 0; i < pxCount; i++) {
    // 這里不用 ES6 解構(gòu)賦值的寫法，主要為了保證性能
    // PS: 這里如果用解構(gòu)賦值語法將導(dǎo)致大量新對(duì)象的創(chuàng)建，是個(gè)很耗時(shí)的過程
    const r = frame.data[i * 4 + 0];
    const g = frame.data[i * 4 + 1]; 
    const b = frame.data[i * 4 + 2];
    
    // 將黑色區(qū)域以外的內(nèi)容設(shè)為透明
    if (r > 15 || g > 15 || b > 15) {
      frame.data[4 * i + 3] = 0;
    }
  }
    
  // 設(shè)置蒙版
  barrage.setMask(frame);
};

使用組件提供的渲染周期鉤子 .beforeRender() 可以在彈幕動(dòng)畫的每一幀圖像渲染前計(jì)算出蒙版圖像。其中，用于更新蒙版的接口為 .setMask()。

視頻、彈幕的操作綁定

最后，為了讓彈幕的行為與視頻播放的操作協(xié)同，還需要進(jìn)行一些綁定的操作：

// 綁定播放事件
video.addEventListener(  'play',
  ( ) => {
    barrage.play();
  },  false);

// 綁定暫停事件
video.addEventListener(  'pause',
  ( ) => {
    barrage.pause();
  },  false);

// 切換播放進(jìn)度
video.addEventListener(  'seeked',
  ( ) => {
    barrage.goto(video.currentTime * 1000);
  },  false);

這里分別用到 Brrage UI 組件的 .play() .pause .goto() 三個(gè)接口，分別用于播放、暫停和切換彈幕動(dòng)畫的進(jìn)度。需要注意的是，通過 video.currentTime 屬性獲取到的視頻播放進(jìn)度是一個(gè)單位為 秒 的浮點(diǎn)數(shù)，需要轉(zhuǎn)換為 毫秒數(shù) 再傳給彈幕組件。

源碼奉上

本文的案例已上傳 Github，感興趣的童鞋可以點(diǎn)擊 這里（https://github.com/parksben/masking-danmaku-demo） 查看源碼細(xì)節(jié)。

關(guān)于 Barrage UI 組件如果有什么建議和疑問，歡迎大家在項(xiàng)目中提 issue 給我，幫助我持續(xù)改進(jìn)和迭代，更歡迎 star 和 PR。

作者:Parksben

來源:微信公眾號(hào):創(chuàng)宇前端

出處:https://mp.weixin.qq.com/s/0HwQh5nUaK6Vi0EWbU8ENQ