uniapp和原生交互实现图片边缘拉伸效果

因为现在手机屏幕的多样化，导致我们的图片会存在一些拉缩变形的情况，所以这里我针对这块进行了一个方案的解决，如果大家还有更好的，感谢大家分享一下。（特别说明：我这里用的是本地图片，网络图片我没有研究过，所以如果您的是网络图用不了，麻烦您自己自行解决哈！）

我这里采用的方案是使用原生对图片进行处理，然后同步回传给uniapp进行展示（异步也可以），这种方案本人亲测有效（公司项目已经在使用），效果也还是蛮不错的，如果需要更高端更有效的，大家可以自行研究！

在开始讲解方案前，大家可以先去看我之前写的uniapp和原生交互数据文章，下面是文章地址：

iOS和uniapp数据交互：https://blog.csdn.net/yun199466/article/details/106269636

Android和uniapp数据交互：https://blog.csdn.net/yun199466/article/details/106269779

我这里使用的同步从原生回传图片的，大家也可以用异步回传图片，这个看个人需求。

好了，废话不多说，开始讲解源码和流程了！！！

一、需要先获取到展示图片容器的宽高（注意：这个宽高是要传到原生进行使用的，别忘记了）

            //获取素材版本号（这个版本号是为了在后期修改、新增图片后，可以重新进行生成而设定的）

            let native_image_base_key = "image_V1";

            //获取本地存储的base64图片
            let localBaseData = uni.getStorageSync(native_image_base_key);

            //查找图片容器元素

            let that = this;
            const query = uni.createSelectorQuery().in(this);
            query.select('.你的容器的样式名称').boundingClientRect(data => {
                let containerW = data.width;//容器的宽
                let containerH = data.height;//容器的高

               //保存图片时的key值，这个看个人怎么定义，注意多个图片的时候不要设置一样的，防止图片被覆盖

                let key = "my_img";

               //优先判断本地是否存储过了base64编码，存储了就拿本地，否则传到原生进行压缩处理
               //同时判断是否存在指定版本素材的图片（考虑后期可能会更换图片）
                if (localBaseData != "" && localBaseData != null && localBaseData != undefined && 
                    localBaseData[key] != null && localBaseData[key] != "" && localBaseData[key] != undefined) {
                    console.log("取本地的Base64图片");
                    var base64Data = localBaseData[key];
                    //TODO：这里将图片base64赋值到你的<image>容器就可以了

               } else {
                            //将图片传到原生压缩到指定宽高后回传base64回来进行替换展示
                            let baseImage = NativePlugin.NativeImageSplitter("图片名或者图片路径（这里传给原生是为了原生项目可以拿到本地图片）",containerW,containerH);
                            if (baseImage != null && baseImage != undefined){
                                
                                if (Array.isArray(baseImage) && baseImage.length > 0) {
                                    //处理iOS端返回的数据
                                    that.nativaBaseData[key] = baseImage[0];

                                    //TODO：记得同时更新图片容器的图片显示
                                   
                                } else {
                                    //处理Android返回的数据
                                    if (baseImage != "") {
                                        that.nativaBaseData[key] = baseImage;

                                        //TODO：记得同时更新图片容器的图片显示
                                    }

                                }
                }
                uni.setStorage({key:native_image_base_key,data:this.nativaBaseData,success() {
                        console.log("保存本地base64成功");
                 }});
            }).exec();

nativaBaseData ： 这是我定义的一个全局对象，用来存储Base64编码图片的。格式{"my_img":"处理过的base64编码图片字符串"}

二、原生将base64编码图片传到uniapp代码
（1）iOS端回传代码

（2）Android端回传代码

注意点:
1、本地图片最好是叫美工设计成有边缘拉伸效果的；

2、图片回传可使用同步、异步都可以，这个看个人需求而定，这里我只是才有同步来讲解下思路；

三、原生两端的代码
（1）iOS端原生代码

https://download.csdn.net/download/yun199466/16744224

（2）Android端原生代码

https://download.csdn.net/download/yun199466/16744284