js生成海报，利用html2canvas截图生成图片

最新推荐文章于 2022-12-16 07:57:14 发布

何忧非喜{傲娇的程序媛}

最新推荐文章于 2022-12-16 07:57:14 发布

阅读量3.3k

点赞数 1

分类专栏：五味杂陈还是甜文章标签： html js

本文链接：https://blog.csdn.net/u013252962/article/details/107489411

版权

本文介绍如何在手机端网站中，利用html2canvas库在js环境下生成包含富文本排版的封面图片。当将此功能从纯html页面移植到thinkphp框架时，遇到富文本渲染问题，通过在生成图片时临时隐藏富文本div并重置滚动条位置解决了问题。

摘要由CSDN通过智能技术生成

手机端网站，要求点击分享封面，可以将缩略图、标题、简介按照一定排版生成图片，并包含当前url的二维码

本机纯html页面，生成图片完全OK,但是放到thinkphp框架后，死活就是不能生成，后来检测到是渲染富文本的变量导致，究其原因目前还不知道为什么。解决方法，在生成图片的时候，将富文本的div进行隐藏，生成后再显示。

滚动条的位置要重置，否则生成的图片上部分会有留白

代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{$article.post_title}</title>
    <link href="__TMPL__/public/assets/mftw/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<!--排版默认隐藏-->
<div class="" id="poster-container" style="display: none;">
    <div class="poster-container " style="background:#0b6cbc;padding-top: 20px;">
        <div style="text-align: center;padding: 10px 0;">
            <img src="__TMPL__/public/assets/image/logo.jpg" class="img-responsive" width="300" style="display: inline-block;" />
        </div