【修复日常bug】京东富文本详情图变形的多种处理方式(解决商品详情图片宽高不适应问题)
我前面写过一篇解析京东富文本详情的文章:
https://blog.csdn.net/qq_35610214/article/details/102468150
上面这篇文章是处理小程序无法显示京东商品详情的问题,处理方式有很多弊端,是把富文本详情图https地址正则解析下来后重新拼接image标签渲染新数据;上面方法目前不赞同使用,因为我有更好的解决方法;
问题概述
问题一:京东商品详情图片在移动端显示过大,显示不全,无法自适应(京东样式写死宽高导致)
问题二:京东商品详情图片比例缩放后外层容器整体高度无法缩短
代码适配端
uniapp开发的Android、Ios、H5、微信小程序、支付宝小程序、百度小程序、字节跳动小程序、qq小程序。(如有uniapp开放其它端的应用程序,可自行测试是否通用)
问题产生
需要处理的图片格式分为多种(目前所遇到的)
1、background-image:url('')显示的图片,宽高固定了px;
2、img标签显示的图片,<img width="750" 宽度固定了;
3、table标签内嵌img标签, <table width="640" 宽度固定了;
4、京东返回图片地址协议问题,出现同时使用https和http导致,例如:“https:http://xxxx.img.jpg”;
解决代码(代码不重要,重要的是思路)
html代码片段
1、给富文本的父容器添加类名 class="goods_desc"(方便js查找goods_desc对象);
2、goodsInfo.goods_desc是京东富文本数据;
3、添加动态变量(goodsDescStyle)用于绑定js操作的样式(这里需要记住,我们不需要太过于修改京东富文本详情原有数据,只需要修改外部容器的样式即可解决图片比例缩放问题);
<block v-if="goodsInfo.goods_desc"><div v-html="goodsInfo.goods_desc" class="goods_desc" :style="goodsDescStyle"></div>
</block>
css代码片段
1、>>> 是样式穿透修饰符
2、修改goods_desc下面的所有img标签样式不包括有属性为usemap的标签;
例子:匹配 <img src="xxx.jpg"/>
不匹配 <img src="xxx.jpg" usemap=“xxx” />
.goods_desc >>> img:not([usemap]){width:100%;height:auto!important;}
javascript代码片段(重点)
// 获取goods_desc容器对象
uni.createSelectorQuery().select('.goods_desc').boundingClientRect((rect)=>{// rect是goods_desc的返回值(包括宽高)if(!rect){//rect不存在则退出return;}// goods_desc容器的宽度let width = rect.width// goods_desc容器的高度let height = rect.height//默认初始化京东富文本详情图片的宽度等于goods_desc容器的宽度let goodsDescImgWdith = widthif(this.goodsInfo.goods_desc.indexOf('ssd-module-mobile-wrap') != -1){// 第一种富文本类型处理方式goodsDescImgWdith = 750}else if(this.goodsInfo.goods_desc.indexOf('ssd-module-wrap') != -1){// 第二种富文本类型处理方式goodsDescImgWdith = 690}else if(this.goodsInfo.goods_desc.indexOf('id=\"__01\"') != -1){// 第三种富文本类型处理方式goodsDescImgWdith = 690}else if(this.goodsInfo.goods_desc.indexOf('<table width="640"') != -1){this.goodsInfo.goods_desc = this.goodsInfo.goods_desc.replace(/usemap="#Map"/g,'usemap="#Map" width="640"')// 第三种富文本类型处理方式goodsDescImgWdith = 640}// 第四种富文本类型处理方式this.goodsInfo.goods_desc = this.goodsInfo.goods_desc.replace(/https:http/g,'https')// 在京东富文本详情图宽度和goods_desc容器宽度中两者取最小的值let targetWidth = Math.min(goodsDescImgWdith, width);// goods_desc缩放比例 = 最小的宽度值/京东富文本宽度值let scaleValue = targetWidth/goodsDescImgWdith;// 由于图片宽度缩放正常比例后会导致高度有一大片空白区域,所以高度也需要进行比例缩放拿到真实高度// goods_desc容器的真实高度 = (缩放比例等于1说明比例无需缩放) 否则 (goods_desc容器的伪高度 * 缩放比例)let parentHeight = scaleValue == 1? 'auto' : (height*scaleValue + 'px')// 灵活运用css3样式,使用transform将goods_desc进行整体容器缩放,高度也正常缩放 得到最终的正常样式this.goodsDescStyle = {transformOrigin:"0px 0px", //初始化默认旋转元素位置点transform:"scale(" + scaleValue + ")", //宽度比例缩放值height:parentHeight //商品详情图正常高度}
}).exec()
tips: this.goodsInfo.goods_desc是京东富文本详情数据。
1、先获取goods_desc容器对象,在网页中获取class可以使用document.getElementsByClassName,其原理一样;
2、然后返回rect结果,我们只取rect中的width(goods_desc容器宽度)和height(goods_desc容器高度)即可,拿到变量width和变量height,这两个值待会需要在下面做公式计算;
3、定义变量goodsDescImgWdith,是为了记录京东富文本详情图的实际宽度,先默认初始化为goods_desc自身的宽度,
如下图:
4、京东富文本详情图的宽度分为好几种类型(宽度值不同),我们只需要在对应的类型上做判断再定义宽度值赋值变量goodsDescImgWdith,目前发现的类型有以下几种
例一:class="ssd-module-mobile-wrap"的情况下,京东商品详情图实际的宽度是750px;
例二:class="ssd-module-wrap"的情况下,京东商品详情图实际的宽度是690px;
例三:id="__01"的情况下,京东商品详情图实际的宽度是690px;
例四:<table width="640"的情况下,京东商品详情图实际的宽度是640px,这里比较特殊的点是下面的img标签附带属性usemap="#Map"需要直接replace全局匹配替换成usemap="#Map" width="640";
5、京东商品详情返回了图片地址不正确,格式是这样的"https:http://xxxx.jpg",将https:http直接replace全局匹配替换成https;
6、我们现在将拿到的京东富文本详情图宽度,进行一个简单的公式
最小的宽度 = Math.min(京东富文本详情图宽度,goods_desc容器宽度);(在京东富文本详情图宽度和goods_desc容器宽度中两者取最小的值)
宽度比例缩放值 = 最小的宽度 / 京东富文本详情图实际宽度 ;
此时正确的宽度比例缩放值已经拿到,然后目前要做的是高度也要缩放,所以公式如下;
商品详情图正常高度 = goods_desc容器高度值 * 宽度比例缩放值 (结果单位为px)
详情图比例缩放值等于1的情况下说明京东富文本详情图宽度和goods_desc容器宽度相同(没有变形,图片正常),无需修改其高度;
这个时候我们通过公式换算已经拿到了宽度比例缩放值和商品详情图正常高度(px),只需要渲染到字段goodsDescStyle即可,其样式如下:
// 灵活运用css3样式,使用transform将goods_desc进行整体容器缩放,高度也正常缩放 得到最终的正常样式
this.goodsDescStyle = {transformOrigin:"0px 0px", //初始化默认旋转元素位置点transform:"scale(" + scaleValue + ")", //宽度比例缩放值height:parentHeight //商品详情图正常高度
}
如果你使用的是uniapp,那么以上的代码你可以直接使用,如果使用的是其他框架,那么实现思路是一样的,京东有其他类型富文本格式错乱问题可以私信小鸿出解决方案哦~
【修复日常bug】京东富文本详情图变形的多种处理方式(解决商品详情图片宽高不适应问题)相关推荐
- 淘宝商品详情API接口(item_get-获得淘宝商品详情接口)
通过商品ID请求封装接口商品详情接口,详情API接口,sku价格接口,详情属性接口,销量接口等可以获取到详情页面上的参数数据包括:商品标题,商品图片,sku价格,区间价,最小起批量,库存,属性图片,详 ...
- html表格方式实现商品详情
HTML表格方式实现商品详情 以下是效果图 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- 阿语python美多商城-商品-商品详情页之第6.6.1节商品详情页分析和准备
商品详情页分析和准备 1. 商品详情页组成结构分析 1.商品频道分类 已经提前封装在contents.utils.py文件中,直接调用方法即可. 2.面包屑导航 已经提前封装在goods.utils. ...
- 小红书商品详情API接口(item_get-获得小红书商品详情接口)
小红书商品详情API接口(item_get-获得小红书商品详情接口)代码对接如下: 1.公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中,点击获取 ...
- 仿商城商品生成分享海报图片和识别图中二维码并跳转商品详情页
购物商城里面的商品分享给朋友的时候会生成一张海报图片,图片上附带这二维码图片,朋友拿到这张图片扫描上面的二维码就可以进入商品详情页查看此商品了.今天来做一下这种功能,先生成商品海报图片,然后长按这张图 ...
- html超链接怎么换行,富文本过程中我遇到的问题以及解决方法(超链接换行以及无法接收超链接鼠标事件以及br或者nbsp;标签会崩溃报错的问题)...
1. 或者 标签崩溃问题 解决方法 HTMLElemen类中 var words = this._getWords(); if (words == null && (!this._c ...
- 富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
- php去除富文本编辑器里的其他样式,提取纯净内容及图片
项目用到富文本编辑器,在提交到数据库时,原始的值是包含HTML编码的样式,但我们又不需要这些无用的样式,需要将其内容提取出来 未处理前,原始的值是这样的 <p><span style ...
- 京东jd商品详情API接口(item_get-根据ID取商品详情)代码封装
item_get-根据ID取商品详情接口 通过代码封装该接口可以拿到商品标题,商品价格,商品促销信息,商品优惠价,商品库存,sku属性,商品图片,desc图片,desc描述,sku图片,sku描述,商 ...
最新文章
- websocket ws 协议 简介
- 【深度学习】ReLU激活函数的缺点
- c++如何定义一个只能在堆上(栈上)生成对象的类?
- 【Linux】一步一步学Linux——cd命令(20)
- 汇编浮点指令fld、fstp
- LeetCode 778. 水位上升的泳池中游泳(二分查找+dfs)
- 冒泡排序的双重循环理解
- kafka 控制台命令
- python教程简书_python教程
- Java项目:Springboot图书馆图书借阅管理系统
- javascript页面刷新的几种方法
- dcp 1519 linux驱动下载,dcp1519驱动
- CPU卡程序设计实例(四)CPU卡处理流程
- 逍遥模拟器微信提示无法连接服务器,轻松解决夜神逍遥模拟器模拟器等模拟器无法连接问题...
- 一文彻底学会CSS-3
- SpringBoot项目在使用Maven打包war中遇到的问题
- ISCC2022--Writeup
- 排查cpu feature 缺少x2apic原因
- Labview LabSQL下载
- 你需要了解的 http 协议基础知识