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


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 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
JavaScript如何操作css
2020/10/24 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
python 提取文件的小程序
2009/07/29 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python中有函数重载吗
2020/05/28 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
家居装修公司创业计划书范文
2014/03/20 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年新教师工作总结
2014/11/08 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
python 详解turtle画爱心代码
2022/02/15 Python
Redis过期数据是否会被立马删除
2022/07/23 Redis