例えば、面白い会話をチャット記録として表示・共有する必要があるのですが、それはWebデザインで実現できると思うので、その生成方法についてここで詳しくお話しましょう。
ウェブページのレイアウト
index.html次のコードを使用してWeb ページ ファイルを作成します
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>chat-room</title>
<script src="./comon/dom-to-image.min.js"></script>
<style>
<!-- 样式 -->
</style>
</head>
<body>
<div id="app" class="chat-room">
<div class="expand" id="box">
<div class="chat-room-header">
<div>{
{navigatoBarTitleText}}</div>
</div>
<div class="chat-room-body">
</div>
</div>
<div class="chat-room-footer">
<button @click="onclick">生成图像</button>
</div>
</div>
<!-- template 1 -->
<!-- template 2 -->
<script>
window.onload = function(){
//...加载，初始化逻辑
}
</script>
</body>
</html>
利用する場合は、ページ表示効果から画像を生成できる機能であるプラグインdom-to-image.min.jsを導入する必要があります。
テンプレートのレイアウト
template 1との前にtemplate 2、2 つの異なるテンプレート レイアウトを実装するためにコメントを書きました。
バブルテンプレート
2 つの異なるチャット バブル レイアウトを表示するために、さらに 2 つのテンプレート レイアウトを作成します。
これは自分用です。コードは次のとおりです
<script id="template1" type="html/plain">
<div class="msg">
<div class="my">
<div class="m">
{
{
item.msg}}
</div>
<div>
<img class="head" src="{
{item.head}}" />
</div>
</div>
</div>
</script>
これは相手を表すためのもので、コードは次のとおりです
<script id="template2" type="html/plain">
<div class="msg">
<div class="other">
<div>
<img class="head" src="{
{item.head}}" />
</div>
<div class="m">
{
{
item.msg}}
</div>
</div>
</div>
</script>
注意してください。ページのコードが
Vue書かれているように見えますが、vue フレームワークの生成に問題があるようであれば、純粋な HTML Web ページや純粋なスクリプト処理を書いても問題ありません。
ロードロジック
2 つのステップで実装され、1 つはデータを提供し、もう 1 つはレンダリングします。
チャットデータ
定義したデータはこんな感じ、コードは以下の通り
const data = {
navigatoBarTitleText:'TA',
list:[],
myHead:'favicon.ico',
};
data.list = [
{
ismy:true, msg:'hello tom', head:data.myHead },
{
ismy:false, msg:'hello', name:'tom', head:data.myHead },
//省略更多...
];
// ...
レンダリングテンプレート
レンダリングテンプレートの実装方法はこれで、コードは次のとおりです
function renderHTML(node,key,value){
let obj = {
};
if(typeof key == 'string') {
obj[key] = value;
}else{
for(let k in key) {
obj['item.'+k] = key[k];
}
}
let html;
if(typeof node == 'string'){
html = node;
}else{
html = node.innerHTML;
}
for(let k in obj){
let reg = new RegExp(`{
{
${
k}}}`,'g');
html = html.replace(reg,obj[k]);
}
if(node.innerHTML) node.innerHTML = html;
return html;
}
次に、読み込み初期化ロジックを記述します。コードは次のとおりです。
let node = document.getElementById('box');
const tLabel = 'timer';
console.time(tLabel);
renderHTML(node,'navigatoBarTitleText',data.navigatoBarTitleText);
let template1 = document.getElementById('template1');
let template2 = document.getElementById('template2');
console.timeEnd(tLabel);
let body = node.querySelector('.chat-room-body');
let template = '';
data.list.forEach(item=>{
if(item.ismy) template += renderHTML(template1,item);
else template += renderHTML(template2,item);
})
body.innerHTML = template;
let button = document.querySelector('button');
button.addEventListener('click',()=>{
domtoimage.toPng(node).then((dataUrl)=>{
clickDownloadLink(dataUrl)
}).catch(function(err){
console.error('oops, something went wrong!', err);
})
});
ここでわかるように
domtoimage.toPng(node)、画像は Web ページ ノードから生成され、
ポスターも生成できますが、純粋な HTML ページのみが有効です。
画像プレビュー
これはブラウザ上で画像と画像プレビューをダウンロードする方法です。コードは次のとおりです。
function clickDownloadLink(url){
let elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('target','_blank');
elem.style.display='none';
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
スタイルを変更する
最後に、閲覧中にスタイルを変更および調整して、チャット記録のリアルな効果を実現します。
body{
margin: 0;
}
.chat-room{
display: flex;
flex-direction: column;
height: 100vh;
}
.chat-room .chat-room-header{
padding: 10px;
text-align: center;
color: aliceblue;
background-color: black;
}
.chat-room .expand,
.chat-room .chat-room-body{
flex: 1;
}
.chat-room .chat-room-body{
overflow-y: auto;
}
.chat-room .msg{
flex: 1;
margin: 10px;
}
.chat-room .msg .m{
flex: 1;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
line-height: 34px;
}
.chat-room .msg .head{
width: 50px;
height: 50px;
margin: 0 2px;
}
.chat-room .msg .my,
.chat-room .msg .other{
display: flex;
flex-direction: row;
}
.chat-room .msg .my .m{
margin-left: 50px;
background-color: #fff;
border-bottom-right-radius: 0;
}
.chat-room .msg .other .m{
margin-right: 50px;
background-color: rgb(16, 199, 138);
border-bottom-left-radius: 0;
}
テストを実行する
ブラウザ上で実行し、画像生成ボタンをクリックして、次のように画像効果を生成します。
テスト後、棒グラフを取得しても問題ありません。
⚠ チャット記録を偽造しないでください。真実と偽りを見分けるのは簡単です。
