关于织梦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 中间请用字母的逗号 ）

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

{dede:arclisttypeid='7'row='7'orderby='pubdate'addfields='icons'channelid='17'}
<li><ahref="[field:arcurl/]"target="_blank">
<divclass="icona-[field:icons/]"></div>
<h4>[field:title/]</h4>
</a>
</li>
{/dede:arclist}