jQuery
Eclipse
1024程序员节，OpenHarmony Meetup，技术盛宴，不见不散
实现目的：网页上点击截图按钮，使用html2canvas截取当前页面选中的DOM元素。
出现问题：截取蒙语的时候，跟浏览器中显示的结果不一样。
浏览器中显示的样式：（中文没有问题）
截图后的样式：蒙文的样式就发生了改变，中文正常
截图JS代码：
$(document).ready(function () {
$(".screenShotsBig").click(function (event) {
event.preventDefault();
html2canvas($("#preview_big_container"), {
height: $("#preview_big_container").outerHeight(),
allowTaint: true,
taintTest: false,
useCORS: true,
logging: true,
dpi: 300,
scale: 2,
onrendered: function (canvas) {
var url = canvas.toDataURL("image/png");
// //以下代码为下载此图片功能
var triggerDownload = $("<a>").attr("href", url).attr("download", 11 + "异常信息.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
}
});
});
});HTML代码：
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-9">
<div class="preview_big_container" id="preview_big_container">
<div class="mn_div"><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;"> </p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
2021 </p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;">
</p><p class="mengwen_font yellow_font" style="padding-left: 38px; font-size: 36px;"></p></div>
<div class="zh_div" style="margin-top: 144px;"><p class="zh_font yellow_font" style="font-size: 76px; line-height: 116px;">这里是中文</p><p class="zh_font yellow_font" style="font-size: 76px; line-height: 116px;">这里是中文</p></div>
</div>
</div>
</div>
</div>
</div>CSS代码：
.mengwen_font {
font-family: "mgt";
font-size: 52px;
float: left;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}
.zh_font {
font-family: KAITI;
font-weight: bolder;
font-size: 78px;
}
.yellow_font {
color: yellow;
}
@font-face {
font-family: 'mgt';
src: url('../../../font/mgt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.preview_big_container {
width: 1200px;
height: 675px;
background-color: #ca0000;
}
.mn_div {
width: 1100px;
/* height: 300px; */
padding: 100px 0px;
margin: auto auto;
}
.zh_div {
width: 1100px;
margin: auto auto;
/* height: 300px; */
/* margin: 291px auto; */
}
.zh_div p {
text-align: center;
}
