通过PHP实现文章生成附带二维码的图片，方便朋友圈分享！

目前的模板有分享图片的功能，直接右击图片复制，并无法直接复制到图片处理软件，右击新窗口打开，会发现是data:image/jpeg;base64,的地址，什么原理不知道，一直想了解，今天在「jdeal」学到一个新知识，记录一下。

「文章自动生成带二维码卡片」该方法更容易在朋友圈获得阅读，下方是效果图。

如图所述，我们可以生成一张带有作者、日期、文章简述及文章地址二维码等信息的卡片，当用户扫码或者在微信中长按识别后就可以直接到达我们的文章页面，相比较直接分享链接，该方法更加美化更加吸引用户。下面我们就一步步来实现该功能。

首先下载两个 JS 文件，将其放入您的网站 JS 目录中，并在网站头部或尾部引用这两个文件。

链接: https://pan.baidu.com/s/1rnJxjVQVCdOBWKx5SCluMA

提取码: 29wi 

这一步骤完成后，在网站页面需要生成卡片的地方创建卡片生成按钮及下载按钮。

<div class="poster"><a class="btn-download" download="poster.jpg" style="display:none;"></a></div> <input type="button" value="生成海报" class="posters" onclick="doS()">

同时在页面源代码下方加入如下的生成卡片 JS。

<script>var isFirst = true;
  function doS() {
    if (isFirst) {
      poster.init({
        banner: "<?php if($this->attachments(1)->attachment->isImage) $this->attachments(1)->attachment->url(); ?>",
        selector: ".poster",
        author: "<?php $this->author(); ?>",
        title: "<?php $this->title() ?>",
        titleStyle: {
          font: "bold 50px Arial",
          color: "rgba(66, 66, 66, 1)"
        },
        content: "<?php $this->excerpt(84, '...'); ?>",
        contentStyle: {
          font: "24px Arial",
          lineHeight: 1.2,
          position: "center",
          color: "rgba(88, 88, 88, 1)"
        },
        logo: "Jdeal.cn",
        logoStyle: {
          color: "rgba(0, 0, 120, 1)"
        },
        description: "Life is like a Design. 　 　",
        qrcode: 'https://您的网址/QR/?url=<?php $this->permalink() ?>',
        qrcodeDesc: "长按识别二维码阅读全文",
        callback: download
      });
      function download(container) {
        const $btn = container.querySelector(".btn-download");
        const $img = container.querySelector("img");
        $btn.setAttribute("href", $img.getAttribute("src"))
      }
      isFirst = false
    }
  };</script>

其中

 banner: 代表卡片的头图部分调用，可以自行修改，任何 PHP 网站都适用这里使用的是 Typecho 的调用代码；

author: 代表的是作者同上道理，可自行修改；

title: 代表标题；content: 代表文章简述；

logo: 代表下部分蓝色字处的网站地址；

description: 代表网站地址上方的简述；

qrcode: 代表文章地址的二维码。

大家可根据自身的网站自行调用。

这里有个需要强调的地方，主要是二维码的问题。由于该方法需要调用文章生成的二维码图片，并且经测试无法使用跨域图片，所以如果您使用的是第三方的二维码生成 API，那么则无法显示二维码图片以及无法显示该卡片，现在我的解决方法是自行在网站搭建了一个生成二维码的 PHP 程序，也非常简单。

下载下方源码

链接: https://pan.baidu.com/s/1rnJxjVQVCdOBWKx5SCluMA 

提取码: 29wi 

您可以在网站根目录创建一个 QR 文件夹，将源码中的 index.php 打开，修改其中的 home及name。修改完成后将 phpqrcode.php、index.php 两个文件导入您新建的 QR 文件夹即可。调用方法为 https:// 您的网址 / QR/?url = 后面接上调用文章地址的方法即可。

至此所有的工作就完成了

对了，CSS 部分我这边不做过多的赘述，可自行根据个人喜好调整。当然该方法并不能算是很完美的方法，但是在影响网站速度方面经过测试并没有太多的影响，代码方法可能有不完美的地方，跨域问题暂时也没有解决。

最新补充：关于跨域的解决办法

由于该方法中 banner 和二维码两张图片可能存在跨域的问题，博主经半天的测试，使用了新的调用方法。

使用如下二维码生成方法，将二维码实时生成 base64 就可以避免域名跨域问题。

同时博主的服务器上开启了七牛云，使用原来的调用语句时出现了调用的是附件地址而不是七牛云地址，于是用下面的方法获取 ID 中的第一个 img 地址，现在已经完美解决，同时也不存在跨域问题。

function urlQRcodeBase64() {
    const qr = new QRious();
    qr.value = "页面地址调用方法";
    var pic_url = qr.toDataURL();
    return pic_url
};
var qrcode = urlQRcodeBase64();
var banners = document.getElementById("post-content").getElementsByTagName("img")[0].src;

同时将上面的方法应用到之前的生成语法中，如下：

···
banner: banners,
qrcode: qrcode,
qrcodeDesc: "长按识别二维码阅读全文",
callback: download
···

下方是二维码生成并转为 base64 的 JS 文件，下载后需引用才可使用上诉方法。

链接: https://pan.baidu.com/s/1_QkZhddVNcK5nYRAhr5E1A 

提取码: nq2u

原文