PHPCMSV9利用html2canvas为内容页增加绘制海报图功能

本教程为PHPCMSV9的内容页增加一个生成带有二维码的海报图的功能，演示图如下

教程开始：
第一步：show.html模板内引入

<link rel="stylesheet" type="text/css" href="{APP_PATH}statics/canvas/css/canvas.css">

第二步：show.html模板合适的地方加入点击生成的按钮

<div class="tab-share-box">
  <div class="tab-share-btn">分享海报</div>
</div>

第三步：show.html模板最下面加入

<div class="bj-fixed-area">
  <div class="previw-area">
    <div class="close-area tabclose-area"></div>
    <img src="{APP_PATH}statics/canvas/img/t.png" class="previw-img-area" />
    <div class="show-text-area">长按图片保存到手机</div>
  </div>
</div>
<div class="areaShareWrap">
      <div class="taplist-area">
        <div class="bg"></div>
        <p class="thumb">{if $thumb}<img src="{$thumb}" />{else}<img src="https://img.shuyanghao.com/weixin/nopic.jpg" />{/if}</p>
        <!-- 上面这里判断了无图的情况 -->
        <p class="title">{$title}</p><!-- 内容标题 -->
        <div class="contents"><p>{$description}</p></div><!-- 摘要 -->
        <div class="ewm">
        <img src="{qrcode($url)}" class="cover-pic" /></div><!-- 利用二维码函数生成二维码实体图片文件 -->
        <div class="taplist_footer">
        <p class="ewm_more">长按图片识别二维码阅读更多</p>
        </div>
      </div>
  </div>
<div class="areaShareLoading">
  <p class="text"><span>正在为您获取最新数据</span></p>
</div>
<script src="{APP_PATH}statics/canvas/js/html2canvas.js?v={JS_VERSION}" charset="utf-8"></script>
<script src="{APP_PATH}statics/canvas/js/canvas.js?v={JS_VERSION}" charset="utf-8"></script>

里面16行是qrcode二维码生成函数，在第四步，$url是你的内容页地址，如果是手机端请自行更换，11行的外链图片是当内容没有缩略图的情况下调用，换成自己的

第四步：/phpcms/libs/functions/extention.func.php增加二维码函数

/**
 * 生成二维码函数
 * qrcode($code)
 */
function qrcode($code) {
        $upload_url = pc_base::load_config('system','upload_url');
        $filename=md5($code.'|4|4').'.png';
        $dir=substr($filename,0,1).DIRECTORY_SEPARATOR.substr($filename,0,4);
        pc_base::load_sys_class('QRcode', '', 0);
        pc_base::load_sys_func('dir');
        $upload_path = pc_base::load_config('system','upload_path');
        $file=$upload_path.'qrcode'.DIRECTORY_SEPARATOR.$dir.DIRECTORY_SEPARATOR.$filename;
        dir_create(dirname($file));
        if(file_exists($file)) return $upload_url.'qrcode'.DIRECTORY_SEPARATOR.$dir.DIRECTORY_SEPARATOR.$filename;
        QRcode::png($code,$file,'H',4,2);
        $QR=$file;
        $logo = 'statics/images/icon.png';//准备好的logo图片       
        if ($logo !== FALSE&&file_exists($QR)) {   
            $QR = imagecreatefromstring(file_get_contents($QR));   
            $logo = imagecreatefromstring(file_get_contents($logo));   
            $QR_width = imagesx($QR);//二维码图片宽度   
            $QR_height = imagesy($QR);//二维码图片高度   
            $logo_width = imagesx($logo);//logo图片宽度   
            $logo_height = imagesy($logo);//logo图片高度   
            $logo_qr_width = $QR_width / 5;   
            $scale = $logo_width/$logo_qr_width;   
            $logo_qr_height = $logo_height/$scale;   
            $from_width = ($QR_width - $logo_qr_width) / 2;   
            //重新组合图片并调整大小   
            imagecopyresampled($QR, $logo, $from_width, $from_width, 0, 0, $logo_qr_width,$logo_qr_height, $logo_width, $logo_height);   
            imagepng($QR,$file);
        }   
        //输出图片   
        return $upload_url.'qrcode'.DIRECTORY_SEPARATOR.$dir.DIRECTORY_SEPARATOR.$filename;
}

第五步：上传压缩包里的文件到根目录

绘图所需文件包