For example, there is an interesting conversation that needs to be displayed and shared in the form of chat records. I think that it can be realized through web design, so how to generate it, let’s talk about it in detail here.
web page layout
Create a web page file index.htmlwith the following code
<!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>
When using it, a plug-in dom-to-image.min.js should be introduced , which is a function that can generate a picture from the page display effect
template layout
I wrote comments such as template 1and before template 2, where I wrote to implement two different template layouts,
bubble template
Write two more template layouts for displaying two different chat bubble layouts,
This is for yourself, the code is as follows
<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>
This is for the other party, the code is as follows
<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>
Pay attention, looking at the code of the page seems to be
Vuewritten, if there seems to be a problem with the generation of the vue framework, it will be no problem to write pure html web pages and pure script processing
loading logic
Implemented in two steps, one provides data and the other renders,
chat data
The defined data is like this, the code is as follows
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 },
//省略更多...
];
// ...
render template
The way to implement the rendering template is this, the code is as follows
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;
}
Then, write the loading initialization logic, the code is as follows
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);
})
});
As you can see here
domtoimage.toPng(node), images are generated from a web page node, and
posters can be generated, but only pure HTML pages are valid.
Picture Preview
This is the method of downloading pictures and picture previews on the browser, the code is as follows
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);
}
modify style
Finally, modify and adjust the style while browsing to achieve the realistic effect of chat records
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;
}
run test
Run it on the browser, click the generate image button, and generate the image effect as follows
After testing, it is no problem to obtain the bar graph;
⚠ Don't forge chat records, it's easy to distinguish between true and false
