关于织梦dede文章封面生成海报二维码的实例操作分享(dedecms网站首页调用自定义字段的方法)

关于织梦dede文章封面生成海报二维码的实例操作分享

分享如何在织梦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个问题后，就相当于聚合了图片，文字，二维码等全部的元素了，这样就可以直接生成带二维码的海报图片了

dedecms网站首页调用自定义字段的方法

我们在做织梦网站的时候，常常会自定义很多字段，怎么在首页自定义调用自定义字段

可以用下面的方法进行调用：

一、指定 channelid 属性（channelid='17' 17是指内容模型里面指定的模型ID)

二、指定要调用出来的字段 addfields='字段1,字段2' （字段1和字段2 中间请用字母的逗号 ）

注意：必须要添加上面两个条件才可以。