主要的職責是 留言彈幕 、 banner 打字效果 、製作壓圖 、表單製作 等功能
主要使用到的技術為 vue2 、 Typed.js 、 html2canvas
— 整體框架使用 vue2
— Banner 使用 Typed.js 製作打字效果
— 使用 html2canvas 製作壓圖
— 串接表單 api
✨ 部分 API 已不再維護
彈幕需求
— 使用者輸入文字,按下送出後會即時顯示於牆上
— 牆上的語錄像跑馬燈那樣流動,位置隨機
— 所有留言 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 格式
});