PHP使用Grafika合成图片,生成海报图

需求背景:
在小程序上生成海报图,但在保存图片时,只能保存其中的小程序码图片,保存下来的图片过于单调,且无法确认该图片的作用性,所以需要调整为保存一整张海报图。

海报效果图:
在这里插入图片描述

需求分析:
在海报图中,背景图、头像、文字、还有小程序码都是各自独立的部分,我们需要把这些图片合并起来,然后输出为一整张图片,这样就可以直接长按保存图片了。

合并图片可以用以下方法:

  1. 在前端合成,使用画布canvas,把各个元素“画”进去;
  2. 在后端合成,使用插件Grafika,把各个组成部分合并在一起;

因为当前是在小程序开发这个需求,考虑到未来可能会替换海报上的一些文字、图片等情况,而每次修改小程序代码都需要提交版本审核,耗时耗力,所以决定在后端进行图片合成,输出图片到前端。

注意:若背景图片有透明的部分,处理过后,透明部分会变成黑色,在Grafika中暂未找到能合并透明图片的方法,感觉有点坑,不过有搜到说可以直接用gd来合成,有空再研究研究吧。(目前的解决方法是换张白色背景的图片)

使用Grafika

安装:

composer require kosinix/grafika:dev-master --prefer-dist

生成方法
function create($slogan, $avatar, $qr){
    // 背景图片
    $bg_img = 'images/qr_code_bg.png';

    // 实例化图像编辑器
    $editor = Grafika::createEditor(['Gd']);
    // 打开海报背景图
    $editor->open($backdropImage, $bg_img);
    $bgWidth = $backdropImage->getWidth();
    // 生成圆形用户头像
    $avatarUrlName = 'temp/avatar.png';
    $this->circular($avatar_url, $avatarUrlName);
    // 打开用户头像
    $editor->open($avatarImage, $avatarUrlName);
    // 重设用户头像宽高
    $avatarWidth = 310;
    $editor->resizeExact($avatarImage, $avatarWidth, $avatarWidth);
    // 用户头像添加到背景图
    $avatarX = 401;
    $avatarY = 36;
    $editor->blend($backdropImage, $avatarImage, 'normal', 1.0, 'top-left', $avatarX, $avatarY);
    // 打开小程序码
    $editor->open($qrcodeImage, $qr);
    // 重设小程序码宽高
    $qrcodeWidth = 430;
    $editor->resizeExact($qrcodeImage, $qrcodeWidth, $qrcodeWidth);
    // 小程序码添加到背景图
    $qrcodeX = 340;
    $qrcodeY = 720;
    $editor->blend($backdropImage, $qrcodeImage, 'normal', 1.0, 'top-left', $qrcodeX, $qrcodeY);

    // 处理文字
    $color = new Color('#FFFFFF');
    $fontPath = Grafika::fontsDir() . '/st-heiti-light.ttc';
    $fontSize = 50;
    // 处理用户昵称
    $nicknameBox = $this->get_text_box($nickname, $fontSize, $fontPath);
    $fontY = 410;
    $fontX = ($bgWidth / 2) - ($nicknameBox[0] / 2);
    $editor->text($backdropImage, $nickname, $fontSize, $fontX, $fontY, $color, $fontPath);

    $str1 = "邀请您注册成为分销员";
    $strBox1 = $this->get_text_box($str1, $fontSize, $fontPath);
    $str1x = ($bgWidth / 2) - ($strBox1[0] / 2);
    $editor->text($backdropImage, "邀请您注册成为分销员", $fontSize, $str1x, $fontY + 100, $color, $fontPath);

    $str2 = "一起赚佣金";
    $strBox2 = $this->get_text_box($str2, $fontSize, $fontPath);
    $str2x = ($bgWidth / 2) - ($strBox2[0] / 2);
    $editor->text($backdropImage,'一起赚佣金', $fontSize, $str2x, 1220, $color, $fontPath);

    // 保存图片
    $editor->save($backdropImage, $qr);
}
  • 使用open()打开图片并获得该图片对象,使用blend()依次合并图片。
  • 在处理头像图片时,需要先指定临时的头像文件,便于后续使用。
  • 添加文字到图片上时text(),Grafika默认的字体不兼容中文,所以需要指定字体文件路径。
// 生成圆形用户头像
function circular($imgpath, $saveName = ''){
    $ext = pathinfo($imgpath);
    $srcImg = null;
    switch ($ext['extension']) {
        case 'jpg':
        case 'jpeg':
            $srcImg = imagecreatefromjpeg($imgpath);
            break;
        case 'png':
            $srcImg = imagecreatefrompng($imgpath);
            break;
    }
    // 获取图片尺寸
    $w = imagesx($srcImg);
    $h = imagesy($srcImg);
    // 设定图片宽高(正方形)
    $w = $h = min($w, $h);
    $newImg = imagecreatetruecolor($w, $h);
    // 必须
    imagesavealpha($newImg, true);
    // 拾取一个完全透明的颜色,最后一个参数127为全透明
    $bg = imagecolorallocatealpha($newImg, 255, 255, 255, 127);
    imagefill($newImg, 0, 0, $bg);
    $r = $w / 2; //圆半径
    for ($x = 0; $x < $w; $x++) {
        for ($y = 0; $y < $h; $y++) {
            $rgbColor = imagecolorat($srcImg, $x, $y);
            if (((($x - $r) * ($x - $r) + ($y - $r) * ($y - $r)) < ($r * $r))) {
                imagesetpixel($newImg, $x, $y, $rgbColor);
            }
        }
    }
    // 输出图片到文件
    imagepng($newImg, $saveName);
    // 释放空间
    imagedestroy($srcImg);
    imagedestroy($newImg);
}
  • 方法的大概思路是:创建一个正方形的透明图片,通过循环,把透明图片上的圆形部分的像素点画上(替换)头像图片对应的像素点,此时得到的图片就是一个圆形的头像图片。
  • 方法中使用了imagecreatetruecolor(),创建真彩图像。此时需要保证使用的图片位数>24(图片文件>属性>详细信息>位深度),否则无法渲染图像成功,结果得到的图片是黑色的。
  • 除了使用php内置函数实现圆形图片外,还可以安装Imagick扩展,更方便。
// 获取字符串宽高
function get_text_box($text, $size, $font){
    $point = imagettfbbox($size, 0, $font, $text);
    $width = $point[4] - $point[6];
    $height = $point[1] - $point[7];
    return [$width, $height];
}
  • 使用imagettfbbox()来获取字符串所在的坐标轴,从而可以拿到字符串文本框的宽高,把字符串居中合并到背景图上。

因为目前无法生成用于前端展示的透明背景的图片,所以改成前端展示的还是一个弹窗,弹窗上添加一个长按事件,触发下载合成海报图片到用户相册

// 长按点击事件
downloadQrCode(){
    wx.showLoading({
        title: "加载中",
        mask: true
    });
    if(this.data.download_qr_code){
        this.downloadSaveImage(this.data.download_qr_code);
    }else{        
        App._get("user/download_agent_qr_code", {}, (result) => {
            if(!result.res){
                wx.showToast({ icon: 'none', title: result.msg });
                return false;
            }
            this.setData({download_qr_code: result.data.url});
            this.downloadSaveImage(result.data.url);
        }, null, (res) => {
            wx.hideLoading();
        });
    }
},
/**
 * 下载图片,并保存到用户相册
 * @param {string} url 图片地址
 */
downloadSaveImage(url){
    wx.getImageInfo({
        src: url,
        success: function (ret) {
            var path = ret.path;
            wx.saveImageToPhotosAlbum({
                filePath: path,
                success(result) {
                    wx.hideLoading();
                    wx.showToast({ icon: 'none', title: "已保存图片到相册" });
                },
                fail(result) {
                    wx.hideLoading();
                    if(result.errMsg.indexOf("saveImageToPhotosAlbum:fail auth deny") !== -1){
                        wx.showToast({ icon: 'none', title: "请允许小程序“保存图片到相册”" });
                    }
                    console.log(result)
                }
            });
        },
        fail: function(result){
            wx.hideLoading();
            console.log(result)
        }
    });
},
  • App._get() 为发送get请求公共方法

参考:
Grafika官方文档
PHP 将图片切成圆角

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值