分享如何在织梦dede上面实现文章封面生成二维码海报

网上找了很多素材，都是基于wordpress开发的比较多，关于织梦dede实现这样的功能比较少，为了方便自己做个备份，就记下这篇文章，方便以后借鉴和开发新方向

为了诠释全面一点，这里主要是涉及到两个问题

1，根据文章的封面，标题，文字，生成图片

2，根据文章的链接生成二维码

海报分享其实就是利用 PHP 的 GD 库来让图片生成，所以你所使用的 PHP 环境必须支持 GD 库哦

第一个：根据文章的封面，标题，文字，生成图片

这里主要是运用到html2canvas来把HTML内容写入Canvas生成图片，它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器

网上有很多html2canvas的教程，这里就不多解释了，这里附上一段dede页面的处理js实例：

<script>	var poster_open = 'on';	var txt1 = '长按识别二维码查看详情';	var txt2 = '来自「 {dede:global.cfg_webname/} 」'; var comiis_poster_start_wlat = 0;	var comiis_rlmenu = 1;	var comiis_nvscroll = 0; var comiis_poster_time_baxt; $(document).ready(function(){ $(document).on('click', '.comiis_poster_a', function(e) { show_comiis_poster_ykzn(); }); }); function comiis_poster_rrwz(){ setTimeout(function(){ html2canvas(document.querySelector(".comiis_poster_box_img"), {scale:2,useCORS:true}).then(canvas => { var img = canvas.toDataURL("image/jpeg", .9); document.getElementById('comiis_poster_images').src = img; $('.comiis_poster_load').hide(); $('.comiis_poster_imgshow').show(); }); }, 100); } function show_comiis_poster_ykzn(){ if(comiis_poster_start_wlat == 0){ comiis_poster_start_wlat = 1; popup.open('<img src="/plus/poster/img/imageloading.gif" class="comiis_loading">');			var url = window.location.href.split('#')[0];			url = encodeURIComponent(url); var html = '<div id="comiis_poster_box" class="comiis_poster_nchxd">\n' + '<div class="comiis_poster_box">\n' + '<div class="comiis_poster_okimg">\n' + '<div style="padding:150px 0;" class="comiis_poster_load">\n' + '<div class="loading_color">\n' + ' <span class="loading_color1"></span>\n' + ' <span class="loading_color2"></span>\n' + ' <span class="loading_color3"></span>\n' + ' <span class="loading_color4"></span>\n' + ' <span class="loading_color5"></span>\n' + ' <span class="loading_color6"></span>\n' + ' <span class="loading_color7"></span>\n' + '</div>\n' + '<div class="comiis_poster_oktit">正在生成海报, 请稍候</div>\n' + '</div>\n' + '<div class="comiis_poster_imgshow" style="display:none">\n' + '<img src="" class="vm" id="comiis_poster_images">\n' + '<div class="comiis_poster_oktit">↑长按上图保存图片，分享好友或朋友圈</div>\n' + '</div>\n' + '</div>\n' + '<div class="comiis_poster_okclose"><a href="javascript:;" class="comiis_poster_closekey"><img src="/plus/poster/img/poster_okclose.png" class="vm"></a></div>\n' + '</div>\n' + '<div class="comiis_poster_box_img zibv cl">\n' + '<div class="comiis_poster_img"><img src="{dede:field name="tepic"/}" class="vm" id="comiis_poster_image"></div>\n' + '<div class="comiis_poster_tita">{dede:field.title/}</div>\n' + '<div class="comiis_poster_txta">{dede:field.description/} ...</div><div class="comiis_poster_x guig"></div>\n' + '<div class="comiis_poster_foot fcym">\n' + '<img src="/plus/poster/api.php?url='+url+'" class="kmewm fqpl vm">\n' + '<img src="/plus/poster/img/poster_zw.png" class="kmzw vm"><span class="kmzwtip">'+txt1+'<br>'+txt2+'</span>\n' + '</div>\n' + '</div>\n' + '</div>'; if(html.indexOf("comiis_poster") >= 0){ comiis_poster_time_baxt = setTimeout(function(){ comiis_poster_rrwz(); }, 5000); $('body').append(html); $('#comiis_poster_image').load(function(){ clearTimeout(comiis_poster_time_baxt); comiis_poster_rrwz(); }); popup.close(); setTimeout(function() { $('.comiis_poster_box').addClass("comiis_poster_box_show"); $('.comiis_poster_closekey').off().on('click', function(e) { $('.comiis_poster_box').removeClass("comiis_poster_box_show").on('webkitTransitionEnd transitionend', function() { $('#comiis_poster_box').remove(); comiis_poster_start_wlat = 0; }); return false; }); }, 60); } } } var new_comiis_user_share, is_comiis_user_share = 0; var as = navigator.appVersion.toLowerCase(), isqws = 0; if (as.match(/MicroMessenger/i) == "micromessenger" || as.match(/qq\//i) == "qq/") { isqws = 1; } if(isqws == 1){ if(typeof comiis_user_share === 'function'){ new_comiis_user_share = comiis_user_share; is_comiis_user_share = 1; } var comiis_user_share = function(){ if(is_comiis_user_share == 1){ isusershare = 0; new_comiis_user_share(); if(isusershare == 1){ return false; } } isusershare = 1; show_comiis_poster_ykzn(); return false; } }</script>

第二个问题:根据文章的链接生成二维码

有时候网站项目需要用到二维码生成功能，或者需要一个二维码生成API接口，这时你可以采用第三方的API接口，如果你担心不稳定的话，也可以自己搭建一个API接口

免费的第三方接口有哪些，我也没有，我是自己搭建一个api接口的，这样稳定方便一点。

如何自己搭建api?

首先需要一个现成的phpqrcode.php类库文件(文章最下方下载) 然后就是自己来写这个生成二维码的api.php，代码如下：

<?php//载入qrcode类库include "./phpqrcode.php";//取得GET参数$text = isset($_GET["text"]) ? $_GET["text"] : ''; //二维码内容$errorLevel = isset($_GET["e"]) ? $_GET["e"] : 'L'; //容错级别 默认L$PointSize = isset($_GET["p"]) ? $_GET["p"] : '5'; //二维码尺寸 默认5$margin = isset($_GET["m"]) ? $_GET["m"] : '2'; //二维码白边框尺寸 默认2//去掉下方注释，可以检测二维码内容是否包含某字段 ，防止盗链。/*$isok = strstr($text, "luckymoke.cn"); //要检测的内容根据自己需求改if(!$isok){	echo "403 Forbidden";	exit; //停止继续执行}*///二维码生成函数function getqrcode($value,$errorCorrectionLevel,$matrixPointSize,$margin) { QRcode::png($value, false, $errorCorrectionLevel, $matrixPointSize, $margin);}getqrcode($text, $errorLevel, $PointSize, $margin);?>

相关的参数说明

text: 二维码对应的网址e : 容错级别(errorLevel)，可选参数如下(缺省值 L)： L水平 7%的字码可被修正 M水平 15%的字码可被修正 Q水平 25%的字码可被修正 H水平 30%的字码可被修正p : 二维码尺寸，可选范围1-10(具体大小和容错级别有关)（缺省值：5）m : 二维码白色边框尺寸,缺省值: 2

下面的代码就是dede文件里面利用api.php?url=带上网址链接，就可以直接生成二维码，记得带上http://，不然会默认为文本格式的

<img src="/plus/poster/api.php?url='+url+'" class="kmewm fqpl vm">

完整的案例下载，右上角可以直接下载参考

解决了这2个问题后，就相当于聚合了图片，文字，二维码等全部的元素了，这样就可以直接生成带二维码的海报图片了