小程序合成海报图片，高度自适应

将一篇带有图片的文章合成一张图片，由于无法直接一起添加图片和文字，将图片和文字拆分开，挨个添加到画布上，可根据文字和图片的高度计算出需要创建画布的高度，并生成合适大小的画布

/***  获取要添加到画布的展示内容* @param $text  内容* @param int $fontsize 文字大小* @param int $width  要展示的最大宽度* @param int $height 要展示的最大高度* @param int $fontHeight  字体高度* @param int $eol_height  EOL高度* @return array*/public static function getShowText($text, $fontsize = 24, $width = 650, $height = 800, $fontHeight = 60, $eol_height = 10){$fontFile = public_path() . '/static/fonts/msyh.ttf';$content = str_replace("&nbsp;", "", $text);$arr = Util::spiltHtml($content);$h = 0;$contArr = array();foreach ($arr as $item) {if ($item['type'] == 'text') {$conTxt = self::autoWrap($fontsize, $fontFile, $item['text'], $width);$size = imagettfbbox($fontsize, 0, $fontFile, $conTxt);$strArr = explode(PHP_EOL, $conTxt);foreach ($strArr as $key => $item) {if (empty($item)) {$h += $eol_height;$contArr[] = ['type' => 'text', 'str' => $item, 'lineheight' => $eol_height];} else {$h += $fontHeight;$contArr[] = ['type' => 'text', 'str' => $item, 'lineheight' => $fontHeight];}if ($h >= $height) {break 2;}}} else if ($item['type'] == 'img') {try{$imginfo = getimagesize($item['src']);$maxImgWidth = ceil($width / 2);if ($imginfo[0] > $maxImgWidth) {$srcH = ceil($width * $imginfo[1] / $imginfo[0]);$h += intval(20 + $srcH);$contArr[] = ['type' => 'img', 'str' => $item['src'], 'w' => $width, 'h' => $srcH];} else {$h += $imginfo[1];$contArr[] = ['type' => 'img', 'str' => $item['src'], 'w' => $imginfo[0], 'h' => $imginfo[1]];}if ($h >= $height) {break;}} catch (\Exception $e){continue;}}}$res = ['h' => $h, 'txtArr' => $contArr];return $res;}/*** @param $fontsize   字体大小* @param $ttfpath   字体文件* @param $str      字符串* @param $width    最大宽度* @param int $fontangle  将被度量的角度大小* @param string $charset   编码* @return string*/public static function autoWrap($fontsize, $ttfpath, $str, $width, $fontangle = 0, $charset = 'utf-8'){$len = mb_strlen($str);$arr = array();$tmpArr = array();$tmpStr = '';for ($i = 1; $i <= $len; $i++) {$tmpStr = mb_substr($str, 0, $i);$size = imagettfbbox($fontsize, $fontangle, public_path() . '/static/fonts/msyh.ttf', $tmpStr);$w = $size[2];if ($w < $width) {if ($i < $len) {continue;} else {return $tmpStr;}} else {$arr[] = $tmpStr;$str2 = mb_substr($str, $i);$tmpStr .= PHP_EOL . self::autoWrap($fontsize, $ttfpath, $str2, $width);}break;}return trim($tmpStr, PHP_EOL);}/*** 将html文字和图片分类成数组* @param $str* @return array*/public static function spiltHtml($str){$content = stripslashes(strip_tags($str, "<img>"));preg_match_all('/<img.*?src=["|\'](.*?)["|\']/',$content, $match);$imgs = $match[1];$res = preg_split('/<img(.*?)>/',$content);foreach ($res as $key => $value) {if($value != ""){$result[] = array('type' => 'text','text' => htmlspecialchars($value, ENT_QUOTES, 'utf-8'));}if(!empty($imgs[$key])){$src = htmlspecialchars($imgs[$key], ENT_COMPAT , 'utf-8');$result[] = array('type' => 'img','src' => $src);}}return $result;}

小程序合成海报图片，高度自适应相关推荐

微信小程序合成海报_利用微信小程序中Canvas API来合成海报生成组件封装
每个小程序成型后,一般都会选择生成带菊花码的海报分享出去来吸引更多的流量.下面来介绍下其他的一种实现方式吧原理:主要利用微信小程序强大的Canvas API来合成,生成后可用wx.canvasToT ...
微信小程序 - 富文本图片宽度自适应（正则）
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确思路把图片的宽度改为手 ...
基于支付宝小程序合成海报
合成海报是活动.商品分享中比较常用的功能.之前在微信小程序中经常实现,最近由于项目需要,在支付宝小程序中也实现了该功能.实现流程大同小异,但由于是两个生态的物种,所以也有个别地方需要注意,在此记录. ...
JAVA生成微信小程序分享海报图片
由于小程序里面分享产品,不能直接到朋友圈,因此很多系统的做法是生成一张带有二维码,或者小程序码的海报图片.用户保存到本地,然后分享到朋友圈. 生成海报,有两种方式: 前端小程通过 canvs 绘图到模 ...
uni-app微信小程序合成海报并保存到相册
页面有三部分的图片.logo.二维码和背景图.其中背景图是本地的. logo和二维码是接口给的. 像这样的海报合成的例子我写过一篇,是在vue的项目中的vue把几张图片logo.二维码.背景合成一个海 ...
微信小程序滚动选项卡 swiper高度自适应
最近做小程序的时候遇到了swiper高度的问题,swiper里面的内容可以根据数据来自适应高度.那就给scroll-view计算一下高度 wxml <view class="conta ...
flex解决微信小程序ScrollView等组件高度自适应
小程序页面开发时经常需要用的scroll-view 和 swiper这两个组件,官方文档显示这两个组件需要设置固定的高度才好用. 当数据列表高度不确定的时候,一开始我是对scroll-view或者sw ...
微信小程序合成海报_微信小程序 canvas生成海报图片模糊问题
一.制作正常显示海报,生成二倍海报隐藏代码如下 {{sendName}} 保存图片 /*css*/ .btn { width: 300rpx; height: 90rpx; line-height: ...
微信小程序富文本图片宽度自适应以及文字自动换行等解决方法
let content = res.content // 后台返回的富文本值 content = content.replace(/;\swidth\s:\s*/g, ';max-width:100% ...

小程序合成海报图片，高度自适应

小程序合成海报图片，高度自适应相关推荐

最新文章

热门文章