微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题

自己码了个微信小程序图片全屏预览组件，并解决了svg真机显示黑屏问题（即png等格式可以正常显示，但就svg无法显示）。

/**
 * 微信小程序图片预览组件
 * 1.支持预览svg、png、jpeg、jpg、bmp等小程序支持的格式，
 * 支持保存图片到本地，支持双指缩放，单指拖动，
 * 支持本地图片、网络图片、小程序云存储图片。
 * 2.不会存在小程序官方提供的全屏预览接口（https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html）
 * 出现的svg预览咱部分真机上不显示的问题。
 * 3.作者：crysu
 * 4.作者博客：https://blog.crysu.com
 * 5.作者邮箱：zbshr@foxmail.com
 */

---

    属性说明

属性名                     默认值                类型        说明                                                    必填

imgUrl                    []                    Array      图片地址的数组                                            是

imgPos                    0                     Number     组件加载时默认加载哪张图片，默认为0，即imgUrl数组的第一个      否

showImgFlag               true                  Boolean    显示/隐藏 组件的控制器，true为显示，false为隐藏              否

scaleMin                  0.2                   String     图片缩放最小倍数                                          否

scaleMax                  20                    String     图片缩放最大倍数                                          否

scaleDefault              2                     String     图片缩放默认倍数                                          否

contentBackgroundColor    rgba(0, 0, 0, 0.6)    String     组件页面背景色                                            否 

imgBackgroundColor        rgba(0, 0, 0, 0.0)    String     图片背景色                                               否

---

引用示例：

首先在小程序根目录创建名为Component的文件夹，然后把源码（文章末尾有链接）文件中的imgPreview文件夹放到Component中

然后在需要引入组件的页面写入以下代码

json:

"usingComponents": {
      "showImg": "/Component/imgPreview/imgPreview"
    }

wxml:

这里的话，imgUrl这个属性是必须的，其他的可以不要

<showImg imgUrl="{{imgUrl}}" imgPos="{{imgPos}}"></showImg>

wxss:

无

js:

data: {
        imgUrl: ["https://markdownserver.crysu.com/test/2021419101938_8567.svg",
        "https://markdownserver.crysu.com/test/333.png",
        "./img/md-chevron_left.svg",
        "cloud://yiyi-62qxe.7969-yiyi-62qxe-1257035987/1564989457044.jpg"
        ],
        imgPos: 0,
        showImgFlag: false,
        scaleMin: "0.2",
        scaleMax: "20",
        scaleDefault: "2",
        contentBackgroundColor: "rgba(0, 0, 0, 0.6)",
        imgBackgroundColor: "rgba(0, 0, 0, 0)"
      },

---

效果：

---

组件源码：

https://crysu.lanzous.com/b09rxx77c
密码:a4m7