前端如何实现从html源码字符串中读取任意张图片进行样式适配

大家可能看到这种标题, 大概可能是写正则去匹配所有的img标签, 然后加上样式进行替换, 这样不就好了

可是呢, 每个的宽高基本都不是固定的, 有的高度特别大, 宽度又特别小呢?

我们都让其高度变成固定的, 比如100像素?

这个时候, 又该反问了, 如果高度很小, 宽度很大呢? 设置高度为100像素, 宽度比例拉伸又超出了盒子?

这个时候, 和后端同事一起看了看, 根据盒子宽度为700像素为基准, 让100除以高度再乘以原有宽度, 如果大于700像素, 就以宽度固定, 高度自适应, 反之高度都是固定100像素( 页面原因很多, 小像素方便查看 )

上面说了这么多, 都是之前的一些思考

大家可以看一下数据

let htmlStr =’

欢迎阅读她的码农公众号文章

‘;
我们一步一步来实现一下

首先, 需要我们将文本字符串转化成可以获取的dom元素

这个时候, 我们需要用到 DOMParser 了

DOMParser可以将储存在字符串中的XML或者HTML源代码解析为一个DOM

我们需要实例化DOMParser后, 调用它的实例方法, 就可以拿到一个Document或XMLDocument或者其他文档类型, 为什么会有这么多类别, 那是因为返回的数据是基于mimeType参数的

大家对于这一块想要了解一下, 可以参考对应MDN讲解

接下来, 需要获取所有的img标签, 我们调用打印一下

可以获取一个伪数组, 我们需要异步读取每一个元素的宽高

我们先来封装一下读取img的宽高

封装完成之后, 我们将获取到的数组进行遍历

我们看一下打印结果

这时候, 每一个的宽高, 我们是可以拿到了, 下面就是判断适配样式了

条件写好了, 怎么添加属性呢?

我们可以使用setAttribute方法, 该方法用于设置指定元素的某个属性值, 所以我们可以直接给style属性加一些样式值

写到这里, 我们算是完成了一大半

剩下的就是如何将执行后的数据拿到再转换成html字符串, 我们先全部执行完成

这里可以使用Promise.all方法

Promise.all(promises).then(() => {});
执行完成之后, 我们琢磨一下如何再转换成字符串

查看MDN后, 看到了一个 XMLSerializer 接口, 该接口可以构建一个包含dom树的XML字符串

先来实例化一下

const serializer = new XMLSerializer();
随后, 需要调用它的实例方法 serializeToString 获取到最终的数据

const htmlTxt = serializer.serializeToString(dom.body, “text/html”);
最后使用v-html进行回显即可

我们可以看到渲染的宽高变化了

今天我们就讲解到这里

下期见