使用微信内置浏览器预览图片

来源：互联网发布：mac可以玩游戏吗编辑：程序博客网时间：2024/05/19 16:50

在微信H5开发中预览图片，可以使用其他的一些图片预览插件，但是这样却不能把其中的某张图片发送给好友。对于这种情况可以使用微信内置浏览器图片预览功能，就可以解决这个问题。不说废话直接看代码：

1、首先获取img标签，并且得到src的值：

var img_array = [];img_array = $("img");var src=[];for (i=0;i<img_array.length;i++){src[i]=img_array[i].src;    //把所有的src存到数组里}

2、把获取到的src数组转换成json：

var strify = JSON.stringify(src);

3、给img标签绑定单击事件：

$('img').click(function(){var index = $('img').index(this);imagePreview(src[index],srcList);});

imagePreview方法：

//这个是调用微信图片浏览器的函数 function imagePreview(curSrc,srcList) {//这个检测是否参数为空            if(!curSrc || !srcList || srcList.length == 0) {                return;            }//这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器            WeixinJSBridge.invoke('imagePreview', {                 'current' : curSrc,                'urls' : srcList            });}

完成以上3步即可。

整体代码：

<script>$(document).ready(function() {var img_array = [];img_array = $("img");var src=[];for (i=0;i<img_array.length;i++){src[i]=img_array[i].src;    //把所有的src存到数组里}var strify = JSON.stringify(src);$('img').click(function(){var index = $('img').index(this);imagePreview(src[index],srcList);});});//这个是调用微信图片浏览器的函数 function imagePreview(curSrc,srcList) {//这个检测是否参数为空            if(!curSrc || !srcList || srcList.length == 0) {                return;            }//这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器            WeixinJSBridge.invoke('imagePreview', {                 'current' : curSrc,                'urls' : srcList            });}</script>

效果图：

阅读全文

0 0