Project scenario:
Realize a requirement to generate a picture based on a piece of text. Among them, a piece of text needs to be underlined, but it is not in the style of text-decoration:underline;, because the underline needs to be a distance away from the word. When I received this plan, I thought of it for the first time It is html2canvas, but there is a small problem in the process of doing it.
Problem Description
Because this paragraph of text does not exist alone, the style on my side initially gave inline elements, and then gave a lower border, but if this text has multiple lines, when generating canvas, it will cause the entire text to appear The underline appears under the block, not underlined under the text itself.
code:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>html2canvas</title>
<style>
span{
line-height: 26px;
border-bottom: 3px solid #000;
}
</style>
</head>
<body>
文字部分：
<div class="container">
总共有以下学校：<span>小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学</span>
</div>
<button onclick="capture()">Capture</button>
<div style="margin-top: 60px;">生成的图片：</div>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
function capture () {
console.log('capture')
html2canvas(document.querySelector('.container')).then(canvas => {
document.body.appendChild(canvas)
})
}
</script>
</body>
</html>
Specific effect:
Cause Analysis:
I didn't look at the specific source code either. I personally think that it is possible to html2canvasrecognize this inline element as a block-level element when generating an image here. (PS: Personal understanding, if someone knows the specific reason, you can guide me)
solution:
What I want here is to put each word into an element separately, give each element a lower border, and then generate it based on this structure, so that no matter how it is recognized, each word has html2canvasa separate underline, visually If there is a connected effect on it, it will be fine.
code:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<title>html2canvas</title>
<style>
.font{
margin: 0;
padding: 0;
display: inline-block;
border-bottom: 3px solid #000;
font-size: 16px;
line-height: 26px;
}
</style>
</head>
<body>
文字部分：
<div class="container">
总共有以下学校：
<!-- font-size:0;很关键，这样里面的行内块元素就没有间隙了 -->
<div id="textBox" style="font-size:0;">
<div class="font">5555</div>
</div>
</div>
<button onclick="capture()">Capture</button>
<div style="margin-top: 60px;">生成的图片：</div>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
var text = "小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学小学初中高中大学"
var node = ''
for (let index = 0; index < text.length; index++) {
console.log(text[index])
node += `<div class="font">${
text[index]}</div>`
}
console.log(document.getElementById('textBox'))
document.getElementById('textBox').innerHTML = node
function capture () {
console.log('capture')
html2canvas(document.querySelector('.container')).then(canvas => {
document.body.appendChild(canvas)
})
}
</script>
</body>
</html>
Specific effect:
Points to note: Add one to the parent element of all text font-size:0;, and remove the gaps between the boxes.
The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.
There is no limit to learning! Work hard, encourage each other!