在微信小程序中使用富文本时,图片宽高不能自适应,所以采用php后台正则方式匹配替换宽高,且保留其他样式
解决方法:
1、小程序前端进行自行替换处理
2、使用第三方富文本插件;如:wxPrase或mp-html插件进行解析处理
2、后端返回数据之前进行处理返回
本文使用后端方式解析处理,使用语言为php
$content = $info['content'];
preg_match_all('/<img.*?src="(.*?)".*?>/', $content, $matches);
if ($matches[1]) {
// 有匹配到的地址,但是需要处理是否存在对应的支持属性
// 匹配style
foreach ($matches[1] as $index => $url) {
$width = $height = 'auto';
preg_match_all('/width="(.*?)"|height="(.*?)"/', $matches[0][$index], $attrMatches);
// dump($attrMatches);
if (isset($attrMatches[1][0]) && $attrMatches[1][0]) {
// 有宽度
$width = $attrMatches[1][0] . 'px';
}
if (isset($attrMatches[2][0]) && $attrMatches[2][0]) {
// 有高度
$height = $attrMatches[2][0] . 'px';
}
// style 属性优先级最高
$extendStyle = '';
preg_match_all('/style="(.*?)"/', $matches[0][$index], $styleMatches);
if (isset($styleMatches[1][0]) && $styleMatches[1][0]) {
// 有相应的属性值
$attr = $styleMatches[1][0];
$attr = explode(';', $attr);
foreach ($attr as $att) {
$temp = explode(':', $att);
if (count($temp) != 2) {
continue;
}
if ($temp[0] == 'height') {
$height = $temp[1];
} elseif ($temp[0] == 'width') {
$width = $temp[1];
} else {
$extendStyle .= ($att . ';');
}
}
}
if ($width == 'auto' && $height == 'auto') {
$width = 'max-width:100%';
}
$style = '';
if (stripos($width, 'max') !== false) {
$style .= ($width . ';');
} else {
$style .= ('width:' . $width . ';');
}
$style .= 'height:' . $height . ';vertical-align:middle;' . $extendStyle;
$content = str_replace($matches[0][$index], '<img src="' . $url . '" style="' . $style . '" />', $content);
}
}
$info['content'] = $content;