主要的職責是 留言彈幕 、 banner 打字效果 、製作壓圖 、表單製作 等功能

主要使用到的技術為 vue2 、 Typed.js 、 html2canvas

— 整體框架使用 vue2

— Banner 使用 Typed.js 製作打字效果

— 使用 html2canvas 製作壓圖

— 串接表單 api

✨ 部分 API 已不再維護

Banner 打字效果

留言板彈幕

彈幕需求

— 使用者輸入文字，按下送出後會即時顯示於牆上

— 牆上的語錄像跑馬燈那樣流動，位置隨機

— 所有留言 hover 為綠色

— 使用者點擊喜歡的該句語錄時 popup 視窗並出現 LINE 以及 FB 之分享按鈕，點選後分享至個人 LINE 或 FB

最後產生的壓圖則是會想這樣讓使用者做分享

這裡的壓圖有使用到 html2canvas 做壓圖

套件本身是做截圖的作用

這是當時製作壓圖的一些設定以及套件的使用方式

const shareContent = vm.$refs.msgShareImg; // 想要截圖的區塊
const width = shareContent.offsetWidth;
const height = shareContent.offsetHeight;
const context = canvas.getContext('2d');
const scale = 2;
let canvas = vm.$refs.canvas; // 使用 canvas 繪製

canvas.width = width * scale;
canvas.height = height * scale;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

context.scale(scale / 2, scale / 2); 

const opts = {
  scale: scale,
  canvas: canvas,
  width: width,
  height: height,
  dpi: window.devicePixelRatio,
  quality: 0.95,
};

// html2canvas 使用方式

html2canvas(shareContent, opts).then(function (canvas) {
  const dataUrl = canvas.toDataURL('image/jpeg', 1.0); // 圖片為 base64 格式
});