企业微信如何实现富文本中的图片预览

965 阅读1分钟

企业微信富文本中的图片是不可以放大,如果发布内容是财务报表类的 每张图片的信息量比较大,那么不可以放大是在是比较头痛的事,基于这个原因,找到了一种可以解决这个问题的办法,步骤如下:

ps:希望有更好方法的伙伴可以一起探讨学习

//获取富文本中的所有图片数组
$scope.arrImg = getAllImgs($scope.detail);

//给图片添加点击事件
if($scope.arrImg.length>0){
    document.getElementsByClassName("content")[0].onclick = function(e){
        var target = e.target || e.srcElement;
        if(target.tagName.toLowerCase() === "img"&&target.src){
            wx.previewImage({
               urls: $scope.arrImg,
               current: target.src
            });
        }
   }}
}

/** 
 * 从富文本中提取img元素列表
 * @param content 富文本内容
**/
function getAllImgs(content){    var imgs = content.match(/<img[^>]+>/g);//content为富文本数据
    var arrImg = [];
    for (var j = 0; j < imgs.length; j++) {
        // 正则匹配,摘出img标签下的src里的内容,即capture
        imgs[j].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match,capture) {
           arrImg.push(capture);
        });
    }
    return arrImg;
}