大家可能看到这种标题, 大概可能是写正则去匹配所有的img标签, 然后加上样式进行替换, 这样不就好了
可是呢, 每个图片的宽高基本都不是固定的, 有的高度特别大, 宽度又特别小呢?
我们都让其高度变成固定的, 比如100像素?
这个时候, 又该反问了, 如果高度很小, 宽度很大呢? 设置高度为100像素, 宽度比例拉伸又超出了盒子?
这个时候, 和后端同事一起看了看, 根据盒子宽度为700像素为基准, 让100除以高度再乘以原有宽度, 如果大于700像素, 就以宽度固定, 高度自适应, 反之高度都是固定100像素( 页面原因很多, 小像素方便查看 )
上面说了这么多, 都是之前的一些思考
大家可以看一下数据
let htmlStr ='<p>欢迎阅读她的码农公众号文章<br><img src="https://lzr5.site/0eebec41-c3ab-4ea8-8466-6f5266b3c29e.jpg"></p><br><img src="https://lzr5.site/9d7579fc-c984-4675-bf3b-074cc7627a0a.jpg">';
我们一步一步来实现一下
首先, 需要我们将文本字符串转化成可以获取的dom元素
这个时候, 我们需要用到 DOMParser 了
DOMParser可以将储存在字符串中的XML或者HTML源代码解析为一个DOM
我们需要实例化DOMParser后, 调用它的实例方法, 就可以拿到一个Document或XMLDocument或者其他文档类型, 为什么会有这么多类别, 那是因为返回的数据是基于mimeType参数的
大家对于这一块想要了解一下, 可以参考对应MDN讲解
https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
接下来, 需要获取所有的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进行回显即可
我们可以看到渲染的宽高变化了
今天我们就讲解到这里
下期见
