如何一键生成分享海报?

2019.12.26 - 宅先生 Hot

        本以为很简单的一个功能,结果愣是给我折腾了两天,现在给分享出来。

        首先,是我最初的实现思路:通过PHP纯代码生成图片的方式来实现。

        按照惯例,先看效果:


        实现代码:

//创建一张空白图像
$im = imagecreatetruecolor(320, 510) or die(json_encode(['error' => 1, 'msg' => '不能初始化新的GD图像流']));
$_bg_color = imagecolorallocate($im, 255, 255, 255); //创建颜色,返回颜色标识符
imagefill($im, 0, 0, $_bg_color); //初始化图像背景为$_bg_color
$billimgpath = 'http://image.sn1987.com/common/39bcb201912181752561328.jpg';
$bg = imagecreatefromstring(file_get_contents($billimgpath));//获取网络图片
$src_info = getimagesize($billimgpath); //得到图片大小
$bgsf = imagecreatetruecolor(320, 179); //创建一个画布
imagecopyresampled($bgsf, $bg, 0, 0, 0, 0, 320, 179, $src_info[0], $src_info[1]);//缩放图像
imagecopymerge($im, $bgsf, 0, 0, 0, 0, 320, 179, 100);//复制合成

$_text_color = imagecolorallocate($im, 0, 0, 0); //文字颜色
$fontpath = config('share_bill_font_path'); //字体文件路径
$im = $this->textcl($im, $_text_color, $title, 14, $fontpath, 215, '');//写入文章标题
$desc_height = mb_strlen($title, 'utf-8') > 14 ? 283 : 255;
$_text_color = imagecolorallocate($im, 78, 88, 90);//文字颜色
$descrition = mb_substr($abstract, 0, 65, 'utf-8'); //截取文章摘要
$im = $this->textcl($im, $_text_color, $descrition, 12, $fontpath, $desc_height, '  ');//写入文章摘要

//二维码图像地址,我这里使用的是代码狗博客提供的二维码生成接口
$ewm = 'https://www.daimadog.com/qrcode.php?cont=http://www.beatlife.cn/article/22.html&rc=L&size=100';
$qecode = imagecreatefromstring(file_get_contents($ewm));//获取网络图片
$ewm_info = getimagesize($ewm); //得到图片大小
imagecopymerge($im, $qecode, 20, 370, 0, 0, $ewm_info[0], $ewm_info[1], 100);//复制合成

$dateimg = imagecreatetruecolor(160, 160); //创建一个画布
imagefill($dateimg, 0, 0, $_bg_color); //填充颜色
imagettftext($dateimg, 10, 0, 0, 40, $_text_color, $fontpath, '扫描二维码查看全部内容');//文字转图片
imagettftext($dateimg, 10, 0, 0, 70, $_text_color, $fontpath, '———————————');
imagettftext($dateimg, 10, 0, 0, 100, $_text_color, $fontpath, '网址:www.beatlife.cn');
imagecopymerge($im, $dateimg, 150, 370, 0, 0, 160, 160, 100);//复制合成

header("Content-type:image/png;"); //以图像类型输出
imagepng($im);//展示图像
imagedestroy($im); //销毁图像,释放资源

每一行都有注释,其中有个字体文件,简单说下,我这里配置的是绝对路径

//分享海报字体库
'share_bill_font_path' => ROOT_PATH.'/public/static/common/fonts/YAHEI.CONSOLAS.1.12.TTF'

还有一个文字转图片的代码段,如下:

//自动文字换行计算
private function textcl($img, $_text_color, $str, $fontSize, $fontpath, $Y, $before) {
for($i=0; $i < mb_strlen($str, 'utf8'); $i++) {
$letter[] = mb_substr($str, $i, 1, 'utf-8');
}

$content = $before;
foreach($letter as $l) {
$teststr = $content." ".$l;
$fontBox = imagettfbbox($fontSize, 0, $fontpath, $teststr);
if(($fontBox[2] > 280) && ($content !== "")) {
$content .= "\n";
}
$content .= $l;
}

imagettftext($img, $fontSize, 0, ceil((320 - $fontBox[2]) / 2), $Y, $_text_color, $fontpath, $content);
return $img;
}

        参数说明:图像载体,字体颜色,字符串内容,字体大小,字体路径,添加在字符串之前(用于首行缩进)

        好了,PHP纯代码生成海报的方式大致如此,至于图片结构可自行diy,注意控制好合成位置坐标即可。这种方式的参考链接:https://www.daimadog.com/4161.html 。

        为什么还要介绍第二种思路呢?因为,通过PHP纯代码生成海报的方式在服务器配置不理想的情况下,生成图片的效率还是很慢的。所以,通过前端html2canvas插件,纯JS生成海报截图的方式在用户体验上更优。

        思路2:通过前端html2canvas插件,纯JS生成海报,效果图:


        实现核心代码:

//生成分享海报按钮
$('.sharebill-btn').on('click', function() {
$(".sharebill_box .mark").css('display', 'block');
$(".sharebill_box .share-dialog").css('display', 'block');

if($('.sharebill_box .wait span').hasClass('loading')) {
//生成分享海报按钮
var canvasarea = document.getElementById('billimg');
$('.sharebill_box .wait span').removeClass('success').addClass('loading').html('海报生成中...');
html2canvas(canvasarea, {
scale: 2,
dpi: window.devicePixelRatio * 2,
logging: false,
useCORS: true,
x: $('#billimg').offset().left + $.getScrollWidth()/2,
y: $('#billimg').offset().top
}).then(function(canvas) {
var canvasurl = canvas.toDataURL("image/png", 1.0);
$('#billimg').html('<img src="'+canvasurl+'">');
$('.sharebill_box .wait span').removeClass('loading').addClass('success').html('海报已生成,可保存分享至社交平台');
});
}
});

- END -

各位看官,如果你觉得文章不错,请鼓励鼓励吧~~

一段描述牛人的文字

2000年,有幸目睹了一位当时国内最牛程序员的一次编程操作,从此彻底颠覆了我的想法。

取消

您的支持,是我继续创作的动力!

扫码支持
人生百态皆无常,最是一颗感恩心

打开支付宝扫一扫,即可进行扫码打赏

所得打赏均用于域名续费、服务器租赁等维持平台正常运营的必要支出。

海报生成中...