小程序富文本提取图片可放大缩小


Posted in Javascript onMay 26, 2020

本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码,供大家参考,具体内容如下

启发:

因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇博客,供大家参考

step1

获取到富文本内容,怎么获取就是请求数据嘛,这个不在赘述了。

var nodes = res.data.data.content;

step2

检测 nodes中是否有img标签,这个有很多方法,我这里用的indexOf

if (nodes.indexOf("src") >= 0) {
}

step3

第三步就是用正则全局匹配img标签,并且替换成空,这里setData是为了把图片添加到wxml显示的,说下match和captrue,第一个是带有img标签的返回值,第二个是src的值

//s3:正则匹配所有图片路径
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
 imgs.push(capture);
 that.setData({
  imgs: imgs
 });
 return '';
});

step4

最后就是把多余的p标签清除掉,影响样式

//s4:清除图片后正则匹配清除所有p标签
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
 return '';
});

完整的过程,本例亲测可行

//富文本图片放大
var nodes = res.data.data.content;
if (nodes.indexOf("src") >= 0) {
 //正则匹配所有图片路径
 var imgs = [];
 nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
  imgs.push(capture);
  that.setData({
   imgs: imgs
  });
  return '';
 });
 //清除图片后正则匹配清除所有p标签
 nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
  return '';
 });
}

end

step5

wxml中

<view class='detail'>
 <rich-text nodes="{{nodes}}" bindtap='richImg'></rich-text>
</view>
<view class='detail1'>
 <block wx:for="{{imgs}}" wx:key="" wx:for-item="item">
   <image class='img' src='{{item}}' bindtap='chooseImg' data-src='{{item}}'></image>
 </block>
</view>

最后还有个预览的js

chooseImg: function (e) {  //预览
 var src = e.currentTarget.dataset.src;
 var urls = [];
 urls[0] = src;
 wx.previewImage({
  current: src, // 当前显示图片的http链接 
  urls: urls
 })
},

这里成功后可以需要调整图片的样式

最后

以上只是简单的demo,图片是连续的情况,但在富文本中可能会出现图片不连续,这个后续会贴出来,基本思路就是rich-text也是循环添加到wxml中,本例亲测可行,如有更好的方法,欢迎提出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
innerText 使用示例
Jan 23 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
微信小程序自定义联系人弹窗
May 26 #Javascript
微信小程序单选框自定义赋值
May 26 #Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
You might like
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php封装的page分页类完整实例
2016/10/18 PHP
jquery 图片轮换效果
2010/07/29 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python生成随机密码
2015/03/10 Python
python绘制圆柱体的方法
2018/07/02 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
python math模块的基本使用教程
2021/01/16 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
拉丁舞学习者的自我评价
2013/10/27 职场文书
化工专业推荐信范文
2013/11/28 职场文书
法学函授自我鉴定
2014/02/06 职场文书
外国人聘用意向书
2014/04/01 职场文书
2014年国庆标语
2014/06/30 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android